#### Offcanvas

You can trigger an offcanvas using a link with `href` or a button with `data-bs-target`, but both must include `data-bs-toggle="offcanvas"`.

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

When an offcanvas and its backdrop are visible, `<body>` scrolling is disabled. Use `data-bs-scroll` to enable scrolling and `data-bs-backdrop` to control the backdrop visibility.

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

`.offcanvas-start` positions the offcanvas on the left, `.offcanvas-end` on the right, `.offcanvas-top` displays it from the top, and `.offcanvas-bottom` displays it from 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

Customize the look of offcanvases using utility classes to suit different themes, such as dark navbars. Add `.text-bg-dark` to `.offcanvas` and `.btn-close-white` to `.btn-close` for dark styling.

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

##### Admin Customizer

Easily configure layout, styles, and preferences for your admin interface.

##### Select Theme

##### Default

##### Material

##### Modern

##### SaaS

##### Flat

##### Minimal

##### Color Scheme

##### Light

##### Dark

##### System

##### Topbar Color

##### Light

##### Dark

##### Gray

##### Gradient

##### Sidenav Color

##### Light

##### Dark

##### Gray

##### Gradient

##### Image

##### Sidebar Size

##### Default

##### Compact

##### Condensed

##### On Hover

##### On Hover - Show

##### Offcanvas

##### Layout Position

Fixed Scrollable

##### Sidebar User Info