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

Projects

Progress value is 30%

Floating Side Navigation

A floating side navigation to quickly browse through different sections of the page.

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 Floating Side Navigation is used to provide an overview of the page content and ease the navigation through the page.

It is composed of links to different sections on the same page. To connect each navigation link to the appropriate section, make sure the href value of the link is equal to the ID of the target section.

The component becomes visible past the 'medium' breakpoint. On smaller devices, the navigation visibility can be changed using a trigger element (e.g., button).

To connect the navigation to its trigger, make sure the id value of the first one is equal to the aria-controls value of the second one. The trigger element in the demo is hidden past the 'medium' breakpoint (using the [email protected] visibility class).

The content of the sections the navigation links to, should be wrapped inside a .js-float-sidenav-target element. When this element is inside the viewport, the .float-sidenav--on-target class is added to the .float-sidenav element.
This class can be used to change the style of the navigation when its target is inside the viewport (e.g., you could hide the navigation until the .js-float-sidenav-target is visible).

Changelog

  • ✅ Component created
    🗓 September 15, 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