Introducing the Bootstrap 5 Off-canvas

For years (literally since 2014) I've been answering questions on SO about how to make an "offcanvas sidebar" using Bootstrap. Developers would mistakenly think 3rd party projects like this and this, or even this experimental Offcanvas example in the docs were going to magically work with Bootstrap "out-of-the-box".

Here are some of my favorite "Off-canvas Sidebar" questions from SO...

create-a-responsive-navbar-sidebar-drawer-in-bootstrap

bootstrap-off-canvas-missing-css-js

bootstrap-slide-in-menu-navbar-on-mobile

Thankfully most of these Q&A will retire to the custom sidebar graveyard now that Bootstrap 5 Beta 3 (finally! 🙌🎉) has its own offical Offcanvas Component.

Closer Look at Bootstrap Offcanvas

Announced recently on the blog...

"..the offcanvas comes with configurable backdrop, body scroll, and placement. Offcanvas components can be placed on the left, right, and bottom of the viewport..."

This enables you to build hidden sidebars and content panels into your project for navigation, shopping carts, etc... Buttons or anchors are used as triggers that are attached to the specific Offcanvas element to toggle.

The new Offcanvas Component shares some of the same JavaScript code as the Modal Component. This is not surprising since I used the Modal Component for this sidebar implementation and these off-canvas menus in Bootstrap 4.

Conceptually, they are quite similar, and the same Sass variables for offcanvas’s styles and dimensions are inherited from the modal’s variables. When shown, offcanvas includes a default backdrop that can be clicked to hide the offcanvas. Similar to modals, only one offcanvas can be shown at a time.

The Markup

Simply use the offcanvas* classes and the data-bs- attributes in your HTML to create an Offcanvas element...

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvas1" aria-controls="offcanvasExample">
  Open
</button>

<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvas1">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title">Offcanvas</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <div>
      Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
    </div>
  </div>
</div>

Demo

The Javascript

You can also use the Offcanvas with vanilla JS..

new bootstrap.Offcanvas(document.getElementById("myOffcanvas"), {backdrop: false})

Options: (can be passed via data attributes or JavaScript)

• backdrop: Apply a backdrop on body while offcanvas is open
• keyboard: Closes the offcanvas when escape key is pressed
• scroll: Allow body scrolling while offcanvas is open

Methods:

• toggle(): Toggles an offcanvas element to shown or hidden
• show(): Shows an offcanvas element
• hide(): Hides an offcanvas element

Events:

• show.bs.offcanvas: fired when the show instance method is called
• shown.bs.offcanvas: fired when offcanvas has been made visible
• hide.bs.offcanvas: fired when the hide method has been called
• hidden.bs.offcanvas: fired when an offcanvas has been hidden

Bootstrap Offcanvas Examples

Let's see it in action with some examples.

Basic Left Sidebar Menu

Here's a simple sidebar menu using the Offcanvas component: Demo

Toggle Sidebar with Switch

Add a little JavaScript to trigger the Offcanvas using a switch: Demo

Bottom Pop-up Offcanvas Footer

Of course "offcanvas" isn't just for sidebars. Here's an example of a pop-up footer: Demo

Long live the Offcanvas! What are your thoughts? Did I miss an example you'd like to see? LMK in the comments.