Bootstrap 5 Offcanvas


Offcanvas

Offcanvas is similar to modals (hidden by default and shown when activated), except that is often used as a sidebar navigation menu.

Heading

Some text lorem ipsum.

Some text lorem ipsum.


How To Create an Offcanvas Sidebar

The following example shows how to create an offcanvas sidebar:

Example

<!-- Offcanvas Sidebar -->
<div class="offcanvas offcanvas-start" id="demo">
  <div class="offcanvas-header">
    <h1 class="offcanvas-title">Heading</h1>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">
    <p>Some text lorem ipsum.</p>
    <p>Some text lorem ipsum.</p>
    <button class="btn btn-secondary" type="button">A Button</button>
  </div>
</div>

<!-- Button to open the offcanvas sidebar -->
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
  Open Offcanvas Sidebar
</button>
Try it Yourself »

Example Explained

The .offcanvas class creates the offcanvas sidebar.

The .offcanvas-start class positions the offcanvas, and makes it 400px wide. See examples below for more positioning classes.

The .offcanvas-title class ensures proper margins and line-height.

Then, add your content inside the .offcanvas-body class.

To open the offcanvas sidebar, you must use a <button> or an <a> element that points to the id of the .offcanvas container (#demo in our example).

To open the offcanvas sidebar with an <a> element, you can point to #demo with the href attribute, instead of data-bs-target attribute.



Offcanvas Position

Use the .offcanvas-start|end|top|bottom to position the offcanvas to the left, right, top or bottom:

Right Example

<div class="offcanvas offcanvas-end" id="demo">

Heading

Some text lorem ipsum.

Some text lorem ipsum.

Try it Yourself »

Top Example

<div class="offcanvas offcanvas-top" id="demo">

Heading

Some text lorem ipsum.

Some text lorem ipsum.

Try it Yourself »

Bottom Example

<div class="offcanvas offcanvas-bottom" id="demo">

Heading

Some text lorem ipsum.

Some text lorem ipsum.

Try it Yourself »

Responsive OffCanvas Menu

You can also control when you want to hide or show the offcanvas menu on different screen widths, with the .offcanvas-sm|md|lg|xl|xxl classes:

Example

<div class="offcanvas offcanvas-start offcanvas-lg" id="demo">
Try it Yourself »

Dark OffCanvas Menu

Use the .text-bg-dark class to create a dark offcanvas menu.

Tip: We have also added the .btn-close-white class to .btn-close, to create a white close button that looks nice with the dark background:

Example

<div class="offcanvas offcanvas-end" id="demo">
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas"></button>

Heading

Some text lorem ipsum.

Some text lorem ipsum.

Try it Yourself »

Copyright 1999-2023 by Refsnes Data. All Rights Reserved.