Bootstrap 5 Offcanvas component
Responsive offcanvas/drawer built with the latest Bootstrap 5. Offcanvas component used for hidden sidebar on the page for navigation, shopping carts etc.
Examples for build hidden sidebars into your project for navigation, shopping carts, and more with a few classes and our JavaScript plugin.
Offcanvas 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.
Offcanvas
<div class="offcanvas offcanvas-start show shadow" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">
<div class="offcanvas-header">
<h4 class="offcanvas-title" id="offcanvasLabel">Offcanvas</h4>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.
</div>
</div>
Offcanvas example
Use the buttons below to show and hide an offcanvas element via JavaScript that toggles the .show
class on an element with the .offcanvas
class.
.offcanvas
hides content (default).offcanvas.show
shows content
You can use a link with the href
attribute, or a button with the data-bs-target
attribute. In both cases, the data-bs-toggle="offcanvas"
is required.
Offcanvas
<!-- With Href-->
<a class="btn btn-link" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
Link with href
</a>
<!-- with data-bs-toggle="offcanvas" -->
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
Button with data-bs-target
</button>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
<div class="offcanvas-header">
<h4 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h4>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
Some text as placeholder. In real life you can have the elements
you have chosen. Like, text, images, lists, etc.
</div>
</div>
Static backdrop
When backdrop is set to static, the offcanvas will not close when clicking outside of it.
Offcanvas
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#staticBackdrop" aria-controls="staticBackdrop">
Static offcanvas
</button>
<div class="offcanvas offcanvas-start" data-bs-backdrop="static" tabindex="-1" id="staticBackdrop" aria-labelledby="staticBackdropLabel">
<div class="offcanvas-header">
<h4 class="offcanvas-title" id="staticBackdropLabel">Offcanvas</h4>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div>
I will not close if you click outside of me.
</div>
</div>
</div>
Body scrolling
Scrolling the <body>
element is disabled when an offcanvas and its backdrop are visible. Use the data-bs-scroll="true"
attribute to enable <body>
scrolling.
Offcanvas with body scrolling
Try scrolling the rest of the page to see this option in action.
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable body scrolling</button>
<div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel">
<div class="offcanvas-header">
<h4 class="offcanvas-title" id="offcanvasScrollingLabel">Offcanvas with body scrolling</h4>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<p>Try scrolling the rest of the page to see this option in action.</p>
</div>
</div>
Body scrolling with backdrop
You can also enable
scrolling with a visible backdrop by disabled thedata-bs-backdrop
attribute or set data-bs-backdrop="true"
.Backdrop with scrolling
Try scrolling the rest of the page to see this option in action.
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasWithBothOptions">
Enable both scrolling & backdrop
</button>
<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offcanvasWithBothOptions" aria-labelledby="offcanvasWithBothOptionsLabel">
<div class="offcanvas-header">
<h4 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">Backdrop with scrolling</h4>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<p>Try scrolling the rest of the page to see this option in action.</p>
</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, right, and bottom examples out below.
Offcanvas top
Offcanvas bottom
Offcanvas right
Offcanvas bottom
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">Top offcanvas</button>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasLeft" aria-controls="offcanvasLeft">Left offcanvas</button>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">Right offcanvas</button>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">Bottom offcanvas</button>
<!-- offcanvas -->
<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
<div class="offcanvas-header">
<h4 class="offcanvas-title" id="offcanvasTopLabel">Offcanvas top</h4>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit.
</div>
</div>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasLeft" aria-labelledby="offcanvasLeftLabel">
<div class="offcanvas-header">
<h4 class="offcanvas-title" id="offcanvasLeftLabel">Offcanvas bottom</h4>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body small">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit.
</div>
</div>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
<div class="offcanvas-header">
<h4 class="offcanvas-title" id="offcanvasRightLabel">Offcanvas right</h4>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit.
</div>
</div>
<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">
<div class="offcanvas-header">
<h4 class="offcanvas-title" id="offcanvasBottomLabel">Offcanvas bottom</h4>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body small">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit.
</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.
For example, .offcanvas-lg
hides content in an offcanvas below the lg
breakpoint, but shows the content above the lg
breakpoint.
Responsive offcanvas
This is content within an .offcanvas-lg
.
<button class="btn btn-primary d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasResponsive" aria-controls="offcanvasResponsive">
Toggle offcanvas
</button>
<div class="alert alert-info d-none d-lg-block">
Resize your browser to show the responsive offcanvas toggle.
</div>
<div class="offcanvas-lg offcanvas-end" tabindex="-1" id="offcanvasResponsive" aria-labelledby="offcanvasResponsiveLabel">
<div class="offcanvas-header">
<h4 class="offcanvas-title" id="offcanvasResponsiveLabel">Responsive offcanvas</h4>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#offcanvasResponsive" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<p class="mb-0">
This is content within an <code>.offcanvas-lg</code>.
</p>
</div>
</div>
Responsive offcanvas classes are available across for each breakpoint.
.offcanvas
.offcanvas-sm
.offcanvas-md
.offcanvas-lg
.offcanvas-xl
.offcanvas-xxl
Accessibility
Since the offcanvas panel is conceptually a modal dialog, be sure to add aria-labelledby="..."
, referencing the offcanvas title—to .offcanvas
. Note that you don’t need to add role="dialog"
since we already add it via JavaScript.