Bootstrap finally has an Off-canvas Component
Tags: webdev, css, bootstrap, news
Published: 2021-03-25 13:30:15

---
title: Bootstrap finally has an Off-canvas Component
published: true
description: Make a Bootstrap Sidebar
tags: #webdev #css #bootstrap #news
cover_image: https://i.imgur.com/Mj3H69v.png
---

Introducing the Bootstrap 5 Off-canvas
==

For years (literally since 2014) I've been [answering questions on SO](https://stackoverflow.com/search?q=user%3A171456+off-canvas) about how to make an "offcanvas sidebar" using Bootstrap. Developers would mistakenly think 3rd party projects like [this](https://github.com/iamphill/Bootstrap-Offcanvas) and [this](https://bootstrap-menu.com/), or even this [experimental Offcanvas example in the docs](https://getbootstrap.com/docs/4.0/examples/offcanvas/) 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](https://stackoverflow.com/questions/48996084/create-a-responsive-navbar-sidebar-drawer-in-bootstrap-4)

[bootstrap-off-canvas-missing-css-js](https://stackoverflow.com/questions/65501628/bootstrap-5-off-canvas-missing-css-js)

[bootstrap-slide-in-menu-navbar-on-mobile](https://stackoverflow.com/questions/20863288/bootstrap-3-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](https://getbootstrap.com/docs/5.0/components/offcanvas/).

![Offcanvas](https://img.imgur.com/GfZaVUM.gif)

<hr>

Closer Look at Bootstrap Offcanvas
==

Announced recently on [the blog](https://blog.getbootstrap.com/2021/03/23/bootstrap-5-beta-3/)...

> "..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](https://www.codeply.com/p/LYPEZ5IRHH) and [these off-canvas menus](https://www.codeply.com/go/R855r2BCJO) 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](https://codeply.com/p/GQYCialzFC)

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



<hr>

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](https://codeply.com/p/xsxI3YKDST)

Toggle Sidebar with Switch
--

Add a little JavaScript to trigger the Offcanvas using a switch: [Demo](https://codeply.com/p/1hsMhhLgaq)

Bottom Pop-up Offcanvas Footer
--

Of course "offcanvas" isn't just for sidebars. Here's an example of a pop-up footer: [Demo](https://codeply.com/p/WIqEKRAok9)

<hr>

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