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.