Off-Canvas Navigation

An off-canvas section containing the main navigation.

Dependencies

• Off-Canvas Content
• Animated Menu Button

How to

The Off-Canvas Navigation is a navigation component within a side panel. The panel visibility is triggered by a control (button). When the control is clicked on, the navigation slides in, occupying the whole viewport.

The Off-Canvas Navigation depends on 2 components: the Off-Canvas Content (used to create the sliding-in panel effect) and the Animated Menu Button (to create the morphing icon effect).

To connect the off-canvas navigation 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.

Custom Events #

You can use the same custom events defined for the Off-Canvas Content component.

Categories

• Navigation > Misc
• Navigation > Side Nav

Bug report & feedback

Component Github page ↗