Offcanvas
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.
Offcanvas
Placement
Offcanvas Diffrent Placement Example: Top, 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.
