Offcanvas is a sidebar component that can be toggled via JavaScript to appear from the left, right, or bottom edge of the viewport. Buttons are used as triggers that are attached to specific elements you toggle, and data attributes are used to invoke our JavaScript.
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 contentYou can use a button with the data-as-offcanvas attribute.The data-as-offcanvas="yourUniqueID1" is required.
Offcanvas
Content for the offcanvas goes here. You can place just about any Astral.CSS component or custom elements here.
Offcanvas
Content for the offcanvas goes here. You can place just about any Astral.CSS component or custom elements here.
Offcanvas
Content for the offcanvas goes here. You can place just about any Astral.CSS component or custom elements here.
Offcanvas
Content for the offcanvas goes here. You can place just about any Astral.CSS component or custom elements here.
Designed and built with ♥ by Rume Aluya.