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 hides content (default)
• .offcanvas.show shows content

Link with href Button with data-bs-target

Scrolling the element is disabled when an offcanvas and its backdrop are visible. Use the data-bs-scroll attribute to toggle scrolling and data-bs-backdrop to toggle the backdrop.

Enable body scrolling Enable backdrop (default) Enable both scrolling & backdrop

There’s no default placement for offcanvas components, so you must add one of the modifier classes 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

Toggle top offcanvas Toggle end offcanvas Toggle bottom offcanvas Toggle start offcanvas