tabler/docs/content/ui/components/offcanvas.md

title

title
Offcanvas

Offcanvas is a sidebar component that can be toggled via JavaScript to appear from the left, right, top, or bottom edge of the viewport. Buttons or anchors are used as triggers that are attached to specific elements you toggle, and data attributes are used to invoke our JavaScript.

Basic usage

To create an offcanvas, add the .offcanvas class to a container element. You can also add the .offcanvas-start, .offcanvas-end, .offcanvas-top, or .offcanvas-bottom class to specify the position of the offcanvas. The .show class is used to display the offcanvas.

{% capture html -%}

Content for the offcanvas goes here. You can place just about any Tabler component or custom elements here.

{%- endcapture %} {% include "docs/example.html" html=html raw %}

Cookies banner

The offcanvas component is used to display a cookies banner. It is a great way to inform users about the use of cookies on your website and to get their consent.

{% capture html -%}

Do you like cookies? 🍪 We use cookies to ensure you get the best experience on our website. Learn more

Essential Cookies Only

Allow All Cookies

{%- endcapture %} {% include "docs/example.html" html=html raw %} <script> document.addEventListener('DOMContentLoaded', function() { document.querySelectorAll('[data-bs-scroll="true"]').forEach(el => { new bootstrap.Offcanvas(el, { scroll: true }).show(); }); }); </script>