@@include("./partials/title-meta.html", {"title": "Offcanvas"}) @@include('./partials/head-css.html')
@@include('./partials/topbar.html') @@include('./partials/sidenav.html')
@@include("./partials/page-title.html", {"subtitle":"UI", "title":"Offcanvas"})

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

@@include('./partials/footer.html')
@@include('./partials/customizer.html') @@include('./partials/footer-scripts.html')