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>
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.
Top comments (2)
Wow, this was a nice article. Keep it up ! Looking forward to more of your posts
Great!