CodyHouse Framework + Components are featured on Product Hunt! Join the discussion →

Projects

Progress value is 30%

Off-Canvas Navigation

An off-canvas section containing the main navigation.

Copy: View demo

Dependencies

All components are built upon the CodyHouse Framework.

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.

You can listen to the opening/closing of an off-canvas panel element using the two custom events openPanel and closePanel that are emitted when the panel is open/close.

Changelog

  • ✅ Component created
    🗓 September 20, 2019

Bug Report & Feedback

Get in touch: suggest a component or report a bug.

✅ Project duplicated

✅ Project created

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