Side Navigation v2

Collapsible navigation located in the sidebar.

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">
  <!-- ... -->
</div>

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">
  <!-- ... -->
</div>

Categories

• Navigation > Side Nav

Bug report & feedback

Component Github page ↗