Offcanvas
The Offcanvas (Drawer) component provides a hidden sidebar for menus, carts, and more - enhancing UI and saving space.
Offcanvas Backdrop
Scrolling the
<body>
element is disabled when an offcanvas and its backdrop are visible. Use the
[--body-scroll:true]
attribute to toggle
<body>
scrolling and
[--overlay-backdrop:false]
to toggle the backdrop.
Offcanvas Placement
Try the top, right, and bottom examples out below.
Dark Offcanvas
Customize the look of offcanvases using utility classes to suit different themes, such as dark navbars. Add
.dark
or
data-theme="dark"
in offcanvas components for dark styling.