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">
</div>
<p class="sidenav-label">Label</p>
<a class="sidenav-item">Item one</a>
</div>
<!-- Layer of the body to hide again -->
<label for="e-sidenav" class="e-cap sidenav-hidden"></label>
</div>
<!-- End Sidenav -->Mixed Navbars
Use the colors to create your own navigation.
