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

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`.

Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.

Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.

Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.

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.

Try scrolling the rest of the page to see this option in action.

...

Try scrolling the rest of the page to see this option in action.

Color Scheme

The perfect color mode for your app.

Default

Colored

Dark

Light