#### Offcanvas

You can use a link with the `href` attribute, or a button with the `data-bs-target` attribute. In both cases, the `data-bs-toggle="offcanvas"` is required.

Link with href

#### Offcanvas

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

##### List

- Nemo enim ipsam voluptatem quia aspernatur
- Neque porro quisquam est, qui dolorem
- Quis autem vel eum iure qui in ea

- At vero eos et accusamus et iusto odio dignissimos
- Et harum quidem rerum facilis
- Temporibus autem quibusdam et aut officiis

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

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

##### List

- Nemo enim ipsam voluptatem quia aspernatur
- Neque porro quisquam est, qui dolorem
- Quis autem vel eum iure qui in ea

- At vero eos et accusamus et iusto odio dignissimos
- Et harum quidem rerum facilis
- Temporibus autem quibusdam et aut officiis

#### Offcanvas with backdrop

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

##### List

- Nemo enim ipsam voluptatem quia aspernatur
- Neque porro quisquam est, qui dolorem
- Quis autem vel eum iure qui in ea

- At vero eos et accusamus et iusto odio dignissimos
- Et harum quidem rerum facilis
- Temporibus autem quibusdam et aut officiis

#### Backdroped with scrolling

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

##### List

- Nemo enim ipsam voluptatem quia aspernatur
- Neque porro quisquam est, qui dolorem
- Quis autem vel eum iure qui in ea

- At vero eos et accusamus et iusto odio dignissimos
- Et harum quidem rerum facilis
- Temporibus autem quibusdam et aut officiis

#### Offcanvas Placement

Try the right and bottom examples out below.

- `.offcanvas-start` places offcanvas on the left of the viewport (shown above)
- `.offcanvas-end` places offcanvas on the right of the viewport
- `.offcanvas-top` places offcanvas on the top of the viewport
- `.offcanvas-bottom` places offcanvas on the bottom of the viewport

#### Offcanvas Top

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

##### List

- Nemo enim ipsam voluptatem quia aspernatur
- Neque porro quisquam est, qui dolorem
- Quis autem vel eum iure qui in ea

#### Offcanvas right

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

##### List

- Nemo enim ipsam voluptatem quia aspernatur
- Neque porro quisquam est, qui dolorem
- Quis autem vel eum iure qui in ea

#### Offcanvas bottom

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

##### List

- Nemo enim ipsam voluptatem quia aspernatur
- Neque porro quisquam est, qui dolorem
- Quis autem vel eum iure qui in ea

#### Offcanvas Left

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

##### List

- Nemo enim ipsam voluptatem quia aspernatur
- Neque porro quisquam est, qui dolorem
- Quis autem vel eum iure qui in ea

#### Dark Offcanvas

Change the appearance of offcanvases with utilities to better match them to different contexts like dark navbars. Here we add `.text-bg-dark` to the `.offcanvas` and `.btn-close-white` to `.btn-close` for proper styling with a dark offcanvas. If you have dropdowns within, consider also adding `.dropdown-menu-dark` to `.dropdown-menu`.

##### Dark Offcanvas

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

##### List

- Nemo enim ipsam voluptatem quia aspernatur
- Neque porro quisquam est, qui dolorem
- Quis autem vel eum iure qui in ea

##### Theme Settings

##### Color Scheme

##### Light

##### Dark

##### Layout Mode

##### Fluid

##### Detached

##### Menu Color

##### Light

##### Dark

##### Sidebar Size

##### Default

##### Compact

##### Condensed

##### Hover View

##### Full Layout

##### Hidden

##### Container Width

Full Boxed

##### Layout Position

Fixed Scrollable
Buy Now