Offcanvas

The offcanvas component can be used to create hidden sidebars for navigation, shopping carts, and more.

Overview #

Offcanvas is a sidebar component that can be toggled via JavaScript to appear from the left, right, top, or bottom edge of the viewport. Offcanvas shares some of the same JavaScript code as modals, and therefore, there are quite a few similarities — default backdrop, only one offcanvas can be shown at a time, etc. Clicking on the backdrop will automatically close the offcanvas, but including a dedicated close button is recommended. The toggling is done via JavaScript using the .show class on the .offcanvas:

  • .offcanvas hides content (default)
  • .offcanvas.show shows content

Given below is a live example of an offcanvas which can be toggled by clicking the button or the link.

Open offcanvas (it will slide in from the left of viewport) with...

Link
Offcanvas
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
HTML 
<!-- Offcanvas toggles -->
<button type="button" class="btn btn-primary" data-bs-toggle="offcanvas" data-bs-target="#example-offcanvas-1">
  Button
</button>
<a href="#example-offcanvas-1" role="button" class="btn btn-link" data-bs-toggle="offcanvas">
  Link
</a>

<!-- Offcanvas -->
<div class="offcanvas offcanvas-start" tabindex="-1" id="example-offcanvas-1" aria-labelledby="offcanvas-title-1">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvas-title-1">Offcanvas</h5>
    <button type="button" class="btn-close" 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 class="dropdown mt-3">
      <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
        Dropdown
      </button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Action 1</a></li>
        <li><a class="dropdown-item" href="#">Action 2</a></li>
        <li><a class="dropdown-item" href="#">Action 3</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">Separated link</a></li>
      </ul>
    </div>
  </div>
</div>

A few things to note about offcanvas components:

  • Given how CSS handles animations, you cannot use margin or translate on an .offcanvas element. Instead, use the class as an independent wrapping element.
  • The offcanvas content is made up of header (.offcanvas-header) and body (.offcanvas-body). The header and body are required for some initial padding.
  • Offcanvas components can be toggled using data-bs-toggle="offcanvas" on a button or link, though buttons are generally recommended for being the ideal choice. The targeting is done using data-bs-target for buttons, and href for links.

Accessibility #

Be sure to add aria-labelledby="...", referencing the offcanvas title, to .offcanvas. Additionally, you may give a description with aria-describedby on .offcanvas. Note that you don't need to add role="dialog" since we already add it via JavaScript.

Also note, the animation effect of this component is dependent on the prefers-reduced-motion media query. See the reduced motion section of our accessibility documentation.

Body scrolling #

Scrolling the <body> element is disabled when an offcanvas and its backdrop are visible. Use the data-bs-scroll attribute to enable <body> scrolling.

Open offcanvas with body scrolling enabled...

Offcanvas
Try scrolling the rest of the page to see this option in action. You should be able to scroll without any issues.
HTML 
<!-- Offcanvas toggle -->
<button type="button" class="btn btn-primary" data-bs-toggle="offcanvas" data-bs-target="#example-offcanvas-2">
  Launch offcanvas
</button>

<!-- Offcanvas with body scrolling enabled -->
<div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="example-offcanvas-2" aria-labelledby="offcanvas-title-2">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvas-title-2">Offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <div>
      Try scrolling the rest of the page to see this option in action. You should be able to scroll without any issues.
    </div>
  </div>
</div>

Body scrolling and backdrop #

You can also enable <body> scrolling with a visible backdrop.

Open offcanvas with backdrop and body scrolling enabled...

Offcanvas
Try scrolling the rest of the page to see this option in action. You should be able to scroll without any issues.
HTML 
<!-- Offcanvas toggle -->
<button type="button" class="btn btn-primary" data-bs-toggle="offcanvas" data-bs-target="#example-offcanvas-3">
  Launch offcanvas
</button>

<!-- Offcanvas with backdrop and body scrolling enabled -->
<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="example-offcanvas-3" aria-labelledby="offcanvas-title-3">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvas-title-3">Offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <div>
      Try scrolling the rest of the page to see this option in action. You should be able to scroll without any issues.
    </div>
  </div>
</div>

Static backdrop #

When backdrop is set to static (e.g., using data-bs-backdrop="static"), the offcanvas will not close when clicking outside of it.

Open offcanvas with static backdrop...

Offcanvas
This offcanvas will not close when the backdrop is clicked. You can still close it by clicking the close button.
HTML 
<!-- Offcanvas toggle -->
<button type="button" class="btn btn-primary" data-bs-toggle="offcanvas" data-bs-target="#example-offcanvas-4">
  Launch offcanvas
</button>

<!-- Offcanvas with static backdrop -->
<div class="offcanvas offcanvas-start" data-bs-backdrop="static" tabindex="-1" id="example-offcanvas-4" aria-labelledby="offcanvas-title-4">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvas-title-4">Offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <div>
      This offcanvas will not close when the backdrop is clicked. You can still close it by clicking the close button.
    </div>
  </div>
</div>

Responsive #

Responsive offcanvas classes hide content outside the viewport from a specified breakpoint and down. Above that breakpoint, the contents within will behave as usual. The responsive offcanvas classes come in the following format: .offcanvas-{sm|md|lg|xl|xxl}. For example, .offcanvas-lg hides content in an offcanvas below the large breakpoint, but shows the content above the large breakpoint. Please note, when using the responsive variations, also add the data-bs-target attribute to the close button.

Open responsive offcanvas (large breakpoint)...

Offcanvas
This is the offcanvas body with some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
HTML 
<!-- Responsive offcanvas toggle -->
<button type="button" class="btn btn-primary d-lg-none" data-bs-toggle="offcanvas" data-bs-target="#example-offcanvas-5">
  Launch offcanvas
</button>

<!-- Responsive offcanvas (large breakpoint) -->
<div class="offcanvas-lg offcanvas-end" tabindex="-1" id="example-offcanvas-5" aria-labelledby="offcanvas-title-5">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvas-title-5">Offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#example-offcanvas-5" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <div>
      This is the <strong>offcanvas body</strong> with some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
    </div>
  </div>
</div>

Placement #

There's no default placement for offcanvas components, so you must add one of the modifier classes below.

  • .offcanvas-start places offcanvas on the left of the viewport (shown above)
  • .offcanvas-end places offcanvas on the right of the viewport
  • .offcanvas-top places offcanvas on the top of the viewport
  • .offcanvas-bottom places offcanvas on the bottom of the viewport

Try the top, left, right, and bottom examples out below.

Offcanvas
...
Offcanvas
...
Offcanvas
...
Offcanvas
...
HTML 
<!-- Offcanvas from top -->
<div class="offcanvas offcanvas-top" tabindex="-1">
  ...
</div>

<!-- Offcanvas from left -->
<div class="offcanvas offcanvas-start" tabindex="-1">
  ...
</div>

<!-- Offcanvas from right -->
<div class="offcanvas offcanvas-end" tabindex="-1">
  ...
</div>

<!-- Offcanvas from bottom -->
<div class="offcanvas offcanvas-bottom" tabindex="-1">
  ...
</div>

JavaScript usage #

The examples on this page use data-bs-* attributes for functionality, which is usually enough to cover a majority of use-cases. You can read about options, methods, events, and more in the official Bootstrap documentation.

Offcanvas - Bootstrap
Continue reading on the offical documentation website

Up next
Pagination

Help us grow

Our main goal is to make Halfmoon the go-to framework for building websites, dashboards and tools. If you believe in our mission, consider becoming a sponsor and help us grow.

You can email us directly if you have any queries. We are always happy to answer.

Subscribe for updates

We will notify you when the framework gets a substantial update. No spam ever.

Follow us on Twitter so that you can stay updated that way.