Bootstrap 5 Offcanvas

Offcanvas (Canvas)

Offcanvas is similar to modal (default hidden and displayed when activated), but it is usually used as a sidebar navigation menu.

How to Create Offcanvas Sidebar

The following example demonstrates how to create an offcanvas sidebar:

Example

<!-- Offcanvas Sidebar -->
<div class="offcanvas offcanvas-start" id="demo">
  <div class="offcanvas-header">
    <h1 class="offcanvas-title">Title</h1>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas">Close</button>
  </div>
  <div class="offcanvas-body">
    <p>Some text. Some text. Some text.</p>
    <p>Some text. Some text. Some text.</p>
    <button class="btn btn-secondary" type="button">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 Explanation

.offcanvas Class creates offcanvas sidebar.

.offcanvas-start Class positions offcanvas and sets its width to 400px. For more positioning classes, see the examples below.

.offcanvas-title Class ensures appropriate margins and line heights.

Then, add your content to .offcanvas-body Class.

To open the offcanvas sidebar, you must use <button> Or <a> Element Points To .offcanvas The id of the container (in our example is #demo).

To use <a> Element opens the offcanvas sidebar, you can use the href attribute instead of data-bs-target Attribute Points To #demo.

Offcanvas Positioning

Please use .offcanvas-start|end|top|bottom Position offcanvas to the left, right, top, or bottom:

Right Example

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

Try It Yourself

Top Example

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

Try It Yourself

Bottom Example

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

Try It Yourself