# Vue Bootstrap Offcanvas Component > Learn how to use CoreUI’s Vue Offcanvas component with Bootstrap styles for flexible, framework-consistent UI. ## 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 ```