🎉 Black Friday deal! 25% off your first year of CodyHouse Pro →

Projects

Progress value is 30%

Side Navigation v2

Collapsible side navigation.

Copy: View demo

Dependencies

All components are based on CodyFrame.

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 [email protected]{breakpoint} classes. Basically, you decide when the navigation layout should change, by targeting a breakpoint with the --static class modifier.

<div class="sidenav-v2 [email protected] 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 [email protected] clearfix js-sidenav-v2" data-static-class="border-right">
  <!-- ... -->
</div>

✅ Project duplicated

✅ Project created

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