Off-Canvas Content

An off-canvas section used for complementary content.

How to

The Off-Canvas Content component is used to display complementary content, which is by default hidden below the main content of the page.

To connect the off-canvas content to its trigger (e.g., button), make sure the id value of the first one is equal to the aria-controls value of the second one.

By default, the off-canvas content will enter from left to right. To change this behavior, add one of the following class modifiers to .off-canvas element:

• off-canvas--right
• off-canvas--top
• off-canvas--bottom

The --off-canvas-panel-width and --off-canvas-panel-width-opposite CSS variables are used to set the width of the off-canvas content (default value is 400px/-400px). Make sure to update both variables if you want to change the default panel width.

If you want the off-canvas content to be full width, add the off-canvas--full-width class.

Custom Events #

If you need to open/close a panel element without a trigger element (e.g., you want to open the panel as a consequence of user actions), you can use the triggerOpenPanel and triggerClosePanel custom events.

Here's how you can use these custom events:

function openPanel(element) {
  var event = new CustomEvent('triggerOpenPanel');
  element.dispatchEvent(event);
};

function closePanel(element) {
  var event = new CustomEvent('triggerClosePanel');
  element.dispatchEvent(event);
};

var offCanvas = document.getElementsByClassName('js-off-canvas');
//open first panel available in your page
openPanel(offCanvas[0]);
//close first panel available in your page
closePanel(offCanvas[0]);

You can listen to the opening/closing of an off-canvas panel element using the two custom events openPanel and closePanel that are emitted when the panel is open/close.

Categories

• Overlays

Bug report & feedback

Component Github page ↗