⚡️ Black Friday ends in 1 day - 50% off CodyHouse Pro Lifetime →


Progress value is 30%

Off-Canvas Navigation

An off-canvas section containing the main navigation.

View Demo


All components are based on CodyFrame.

If you're using this component, you should also include the SCSS/JS of the following components:

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.

Project duplicated

Project created

Globals imported

There was an error while trying to export your project. Please try again or contact us.