Offcanvas
Offcanvas
Build hidden sidebars into your project for navigation, shopping carts, and more with a few classes and our JavaScript plugin.
Link with href
Offcanvas
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
Offcanvas placement
There’s no default placement for offcanvas components, so you must add one of these classes: .offcanvas-start, .offcanvas-end or .offcanvas-bottom.
Offcanvas left
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
Offcanvas right
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
Offcanvas top
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
Offcanvas bottom
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
Offcanvas 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.
Colored with scrolling
Try scrolling the rest of the page to see this option in action.
Offcanvas with backdrop
...
Backdroped with scrolling
Try scrolling the rest of the page to see this option in action.