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`: