Build hidden sidebars into your project for navigation, shopping carts, and more.
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.
Responsive offcanvas classes hide content outside the viewport from a specified breakpoint and down. Above that breakpoint, the contents within will behave as usual.
Offcanvas supports a few different placements:
startplaces offcanvas on the left of the viewport
endplaces offcanvas on the right of the viewport
topplaces offcanvas on the top of the viewport
bottomplaces offcanvas on the bottom of the viewport
<body> element is disabled when an offcanvas and its backdrop are
visible. Use the
scroll prop to toggle
<body> scrolling and the
to toggle the backdrop.
backdrop is set to
static, the offcanvas will not close when clicking outside of it.