Off-Canvas

Build hidden sidebars into your project for navigation, shopping carts, and more with a few classes and our JavaScript plugin. Read the Official Bootstrap Documentation for a full list of instructions and other options.

Components

Offcanvas includes support for a header with a close button and an optional body class for some initial padding. We suggest that you include offcanvas headers with dismiss actions whenever possible, or provide an explicit dismiss action.

<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title text-dark">Offcanvas</h5>
    <a href="#" class="close" data-bs-dismiss="offcanvas">&times;</a>
  </div>
  <div class="offcanvas-body">
    Content for the offcanvas goes here...
  </div>
</div>

Live Demo

Show and hide an offcanvas element via JavaScript that toggles the .show class on an element with the .offcanvas class.

<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample">Launch Offcanvas</a>

Placement

There’s no default placement for offcanvas components, so you must add one of the modifier classes .offcanvas-start, .offcanvas-end, .offcanvas-top, .offcanvas-bottom. Try the top, right, and bottom examples out below.

<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop">...</div>

<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasTop">...</div>

<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasTop">...</div>

Backdrop

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

<div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="offcanvasExample">...</div>