Components

## Off-Canvas

Build hidden sidebars into your project for navigation, shopping carts, and more with a few classes and our JavaScript plugin. Read the Official Bootstrap Documentation for a full list of instructions and other options.

##### 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

×
Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.

##### Live Demo

Show and hide an offcanvas element via JavaScript that toggles the .show class on an element with the `.offcanvas` class.

Launch Offcanvas

##### Placement

There’s no default placement for offcanvas components, so you must add one of the modifier classes `.offcanvas-start`, `.offcanvas-end`, `.offcanvas-top`, `.offcanvas-bottom`. Try the top, right, and bottom examples out below.

Launch Offcanvas Top
Launch Offcanvas Bottom
Launch Offcanvas Right

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

Enable body scrolling Enable backdrop (default)

##### Offcanvas

×
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 Right

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

##### Offcanvas

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