Offcanvas

Build hidden sidebars into your project for navigation, shopping carts, and more with a Offcanvas components.

How it works

Offcanvas is a sidebar component that can be toggled to appear from the left, right, top, or bottom edge of the viewport.

When shown, offcanvas includes a default backdrop that can be clicked to hide the offcanvas.

Similar to modals, only one offcanvas can be shown at a time.

Heads up! Given how CSS handles animations, you cannot use margin or translate on an Offcanvas element.

Instead, use the class as an independent wrapping element.

Examples

Offcanvas components

Below is an offcanvas example that is shown by default (via show on Offcanvas).

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.

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

Live demo

Use the buttons below to show and hide an offcanvas element via JavaScript that toggles the show attribute on an element with the Offcanvas component.

  • Offcanvas hides content (default)
  • show shows content

You can use a link with the href attribute, or a button with the target attribute. In both cases, the toggle="offcanvas" is required.

vue

Body scrolling

vue

Body scrolling and backdrop

vue

Static backdrop

vue

Responsive

vue

Placement

There's no default placement for offcanvas components, so you must add one of the modifier classes below;

  • Offcanvas-start places offcanvas on the left of the viewport (shown above)
  • Offcanvas-end places offcanvas on the right of the viewport
  • Offcanvas-top places offcanvas on the top of the viewport
  • Offcanvas-bottom places offcanvas on the bottom of the viewport

Try the top, right, and bottom examples out below.

vue
vue
vue

Backdrop

Scrolling the <body> element is disabled when an offcanvas and its backdrop are visible. Use the scroll attribute to toggle <body> scrolling and backdrop attribute to toggle the backdrop.

vue

Usage

The offcanvas plugin utilizes a few classes and attributes to handle the heavy lifting:

  • placement hides the content
  • placement="show" shows the content
  • placement="start" hides the offcanvas on the left
  • placement="end" hides the offcanvas on the right
  • placement="top" hides the offcanvas on the top
  • placement="bottom" hides the offcanvas on the bottom

Add a dismiss button with the dismiss="offcanvas" attribute, which triggers the JavaScript functionality. Be sure to use the BvBbutton component with it for proper behavior across all devices.

Methods

Demo

vue