# Offcanvas > An offcanvas is a hidden panel that slides in from the edge of the screen, for navigation, filters or settings. Sidebar panel that slides in from the edge of the viewport. Source: https://docs.tabler.io/ui/components/offcanvas --- An offcanvas is a panel that slides in from the left, right, top or bottom edge of the viewport. A button or a link with `data-bs-toggle="offcanvas"` and `data-bs-target` opens it, and Bootstrap's JavaScript does the rest. ## Basic usage Add the `.offcanvas` class to the panel and one of `.offcanvas-start`, `.offcanvas-end`, `.offcanvas-top` or `.offcanvas-bottom` for the edge it slides in from. Bootstrap adds the `.show` class while the panel is open. ```html
Content for the offcanvas goes here. You can place just about any Tabler component or custom elements here.
``` ## Header, title and footer Split the panel into `offcanvas-header`, `offcanvas-body` and `offcanvas-footer`. The header takes a bottom border and holds the title and the close button; the footer keeps the same padding as the body, which suits the buttons that close the panel. Use `offcanvas-title` for the heading, and point the panel's `aria-labelledby` at its id so the panel is announced by name. ```html

Filters

Pick the filters you want to apply.
``` ## Narrow panel Add `offcanvas-narrow` for a panel thinner than the default. It suits a short list of filters or settings, where the full width would leave the panel mostly empty. ```html

Filters

Pick the filters you want to apply.
``` ## Floating panel Add `offcanvas-floating` to keep a gap between the panel and the edges of the screen. The panel gets a border on every side and rounded corners, so it looks like a card over the page. It works with every direction and with the responsive `offcanvas-{breakpoint}` classes. ```html

Settings

The panel does not touch the edges of the screen.
``` The gap is `0.5rem` by default. Change it with the `--tblr-offcanvas-margin` variable, or with `$offcanvas-margin` in SCSS. To float every panel on the page without touching the markup, set [`data-bs-offcanvas-style="floating"`](/ui/layout/page-layouts#floating-offcanvas) on ``. ## Cookies banner An offcanvas at the bottom edge also works as a cookie banner. It stays visible until the user answers, and it doesn't cover the page. ```html ``` ## Accessibility - Point `aria-labelledby` at the offcanvas title so the panel is announced by name. - Bootstrap moves focus into the panel, keeps it there while the panel is open, and returns it to the trigger on close. That depends on `tabindex="-1"` being on the offcanvas element. - The toggle needs `aria-controls` with the panel id. Bootstrap manages `aria-expanded` itself. - Escape closes the panel unless you set `data-bs-keyboard="false"`. If you do turn it off, keep a visible close button. - Content behind the panel stays in the DOM. Use the backdrop, which Bootstrap marks `aria-hidden`, rather than building your own overlay.