# Vue Offcanvas Component > Vue alert component allows build hidden sidebars into your project for navigation, shopping carts. ## How it works The Vue Offcanvas component serves as a sidebar element that can slide in from the left, right, top, or bottom of the viewport. Its visibility is toggled with the `show` prop, usually bound to a button or anchor of your own. _Added in 6.0.0._ Like its successor [Drawer](../drawer/), the offcanvas also takes the canonical `show` / `v-model:show` props — see [Usage with v-model](../drawer/#usage-with-v-model) on the Drawer page. The `visible` prop is deprecated: it keeps its old behavior, and it is ignored when `show` is set. - `` renders the browser's native `` element and shares its underlying dialog behavior with [Modal](../modal/). Conceptually, they are quite similar, but they remain separate components. - When displayed, offcanvas features the native `::backdrop` that can be clicked to hide it, and the browser traps focus inside the panel. - As with modals, only one offcanvas can be displayed at a time. **Attention!** Due to CSS animation handling, `margin` or `translate` cannot be applied to an `.offcanvas` element. Instead, utilize the class as a separate wrapping element. ## Examples ### Offcanvas components Below is an offcanvas example that is shown by default (via `show`). Offcanvas includes support for a header with a close button and an optional body class for some initial `padding`. We suggest that you include offcanvas headers with dismiss actions whenever possible, or provide an explicit dismiss action. ```html ``` ### Live demo Use the buttons below to show and hide an offcanvas component. - `:show="false"` hides content (default) - `show` or `:show="true"` shows content ```html ``` ### Body scrolling Scrolling the `` element is disabled when an offcanvas and its backdrop are visible. Use the scroll property to toggle `` scrolling and backdrop to toggle the backdrop. ```html ``` ### Body scrolling and backdrop You can also enable `` scrolling with a visible backdrop. ```html ``` ### Static backdrop If you set a `backdrop` to `static`, your Vue offcanvas component will not close when clicking outside of it. ```html ``` ## Dark offcanvas Change the appearance of offcanvases with `dark` boolean property to better match them to different contexts like dark navbars. ```html ``` ## Responsive Responsive offcanvas properties hide content outside the viewport from a specified breakpoint and down. Above that breakpoint, the contents within will behave as usual. For example, `responsive="lg"` hides content in an offcanvas below the lg breakpoint, but shows the content above the lg breakpoint. ```html ``` ## Placement There's no default placement for offcanvas components, so you must add one of the modifier classes below; - `placement="start"` places offcanvas on the left of the viewport (shown above) - `placement="end"` places offcanvas on the right of the viewport - `placement="top"` places offcanvas on the top of the viewport - `placement="bottom"` places offcanvas on the bottom of the viewport Try the top, right, and bottom examples out below. ```html ``` ```html ``` ```html ``` ## Accessibility Since the offcanvas panel is conceptually a modal dialog, be sure to add `aria-labelledby="..."`—referencing the offcanvas title—to ``. Note that you don’t need to add `role="dialog"` since we already add it automatically. ## API Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here. - [<COffcanvas />](./api/#coffcanvas) - [<COffcanvasBody />](./api/#coffcanvasbody) - [<COffcanvasHeader />](./api/#coffcanvasheader) - [<COffcanvasTitle />](./api/#coffcanvastitle)