tabler/docs/ui/components/offcanvas.mdx

---
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.

```html
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvas">
  <div class="offcanvas-body">
    Content for the offcanvas goes here. You can place just about any Tabler component or custom
    elements here.
  </div>
</div>
```

Look at the example below to see how the offcanvas works.

```html example vendors height="25rem"
<div
  class="offcanvas offcanvas-start show"
  tabindex="-1"
  id="offcanvas"
  aria-labelledby="offcanvasLabel"
>
  <div class="offcanvas-body">
    Content for the offcanvas goes here. You can place just about any Tabler component or custom
    elements here.
  </div>
</div>
```

## 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.

```html example vendors height="25rem"
<div
  class="offcanvas offcanvas-bottom h-auto show"
  tabindex="-1"
  id="offcanvasBottom"
  aria-modal="true"
  role="dialog"
>
  <div class="offcanvas-body">
    <div class="container">
      <div class="row align-items-center">
        <div class="col">
          <strong>Do you like cookies?</strong> 🍪 We use cookies to ensure you get the best
          experience on our website.
          <a href="./terms-of-service.html" target="_blank">Learn more</a>
        </div>
        <div class="col-auto">
          <button type="button" class="btn btn-primary" data-bs-dismiss="offcanvas">
            Essential Cookies Only
          </button>
        </div>
        <div class="col-auto">
          <button type="button" class="btn btn-primary" data-bs-dismiss="offcanvas">
            Allow All Cookies
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
```