Sidenav Component

Sidenav is a vertical navigation component that works without using Javascript. It offers users a great experience in mobile devices and computers. Recommended for projects with extensive navigation.

Basic structure

This is the basic structure to build a navigation (e-sidenav), it is important to follow this basic structure to activate and deactivate the visibility of the element (e-sidenav).

<!-- Activate button -->
<label for="e-sidenav" class="e-btn">Active</label>

<!-- Sidenav -->
<input type="checkbox" id="e-sidenav">
<div class="e-cap cap-sidenav">
  <div class="e-sidenav">

    <div class="sidenav-brand">
      <img src="./image.png">

    <p class="sidenav-label">Label</p>

    <a class="sidenav-item">Item one</a>

  <!-- Layer of the body to hide again -->
  <label for="e-sidenav" class="e-cap sidenav-hidden"></label>
<!-- End Sidenav -->
Contribute on GitHub
Become a sponsor.

If you are using our framework in a product that generates income, you can also help its maintenance if you wish, if you frequently help in your company or personal developments consider making a recurring donation.

If you want to see your company's logo on this site it's time to be a serious Sponsor.

eFrolic | framework css 2018
eFrolic | framework css 2018

One-time donation

eFrolic | framework css 2018
eFrolic | framework css 2018

Serious sponsor

Become a Patron