---
name: off-canvas
url: /off-canvas
title: Off Canvas
---
Off-canvas
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.