--- name: off-canvas url: /off-canvas title: Off Canvas ---

Off-canvas

A container that is hidden off-screen and pushes its way in view when needed. It can be opened from the top, bottom, right, or left of the screen.


Open Top Off-canvas Open Right Off-canvas Open Bottom Off-canvas Open Left Off-canvas

Basic HTML

An off-canvas pane must be placed before the frame of your app. This allows the frame to animate in and out along with the pane.

The pane can be positioned at the top, right, bottom, or left of the screen with the `position` attribute.

Add the `zf-open`, `zf-close`, and `zf-toggle` directives to other elements to open and close the off-canvas pane. × Open Off-canvas

Advanced HTML

Add the `detached` class to an off-canvas to change how the animation works. Instead of sliding with the frame, the off-canvas pane will stay in place, as the pane slides to reveal the pane.

Lastly, the off-canvas pane supports the coloring classes `primary` and `dark`:


Sass Mixins

Use the off-canvas mixins to write your own custom classes for this component.

.custom-off-canvas { // Extend the off-canvas selector to get the basic structural styles @extend %off-canvas; // Use this mixin to set the position and size of the menu // The shadow is also included in this mixin; its style will change depending on the position of the pane @include off-canvas-layout( $position: left, // Can be top, right, bottom, or left $size: default, // Can be a px, rem, or em value. "default" will use the values in the settings variables $shadow: $offcanvas-shadow // Pass in a shadow value with a Y offset, like 0 2px 10px black ); // Use this mixin to define visual styles for the pane @include off-canvas-style( $background: $offcanvas-background, // Background color $color: $offcanvas-color, // Text color $padding: $offcanvas-padding // Padding inside the pane ); &.custom-detached-class { // Use this mixin to add the detached visual style @include off-canvas-detached; } }

Sass Variables

Use these variables to customize the basic off-canvas menu.