Go to homepage

Projects /

Side Navigation v2

Collapsible navigation located in the sidebar.

View Demo

How to

The Side Navigation v2 component is an accessible side navigation template.

In the mobile ("collapsed") version, the navigation is replaced by a control (button). Pressing the button toggles the navigation visibility. To switch to the desktop ("static") version, use one of the .sidenav-v2--static@{breakpoint} classes. Basically, you decide when the navigation layout should change, by targeting a breakpoint with the --static class modifier.

<div class="sidenav-v2 sidenav-v2--static@md clearfix js-sidenav-v2">
  <!-- ... -->

Use the data-static-class="{class}" attribute on the .sidenav-v2 element if you want to add a list of classes to the navigation when it's in the --static variation (e.g., add data-static-class="border-right" if you want a right border when the navigation becomes static. Check the CodyFrame documentation for a full list of available utility classes.

<div class="sidenav-v2 sidenav-v2--static@md clearfix js-sidenav-v2" data-static-class="border-right">
  <!-- ... -->


Bug report & feedback

Component Github page ↗

Project duplicated

Project created

Globals imported

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