@@include("partials/main.html") @@include("partials/title-meta.html", {"title": "Dropdowns"}) @@include("partials/head-css.html") @@include("partials/body.html")
@@include("partials/menu.html")
@@include("partials/page-title.html", {"pagetitle": "UI Elements", "title": "Dropdowns"})

##### Demo

Use the buttons below to show and hide an offcanvas element via JavaScript that toggles the `.show` class on an element with the `.offcanvas` class.

Link with href

##### Offcanvas

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

##### Placement

Offcanvas Diffrent Placement Example: Left, Right & Bottom

##### Offcanvas Right

...

##### Offcanvas Bottom

...

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

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

##### Offcanvas with backdrop

.....

##### Backdroped with scrolling

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

@@include("partials/footer.html")
@@include("partials/right-sidebar.html") @@include("partials/vendor-scripts.html")