Side Navigation v4
A vertical, side navigation for dashboard and content management systems.
Projects /
Projects /
A vertical, side navigation for dashboard and content management systems.
The Side Navigation v4 component is a main, side navigation. It's ideal for dashboards or content management systems.
The responsiveness is handled by the Responsive Sidebar component.
Add the .sidenav-v4__item--current class to the list item that should be expanded (the one containing the current link), and aria-current="page" to the current link (the page you're on):
<nav class="sidenav-v4 js-sidenav-v4">
<ul>
<li class="sidenav-v4__item">
<a class="sidenav-v4__link js-sidenav-v4__link" href="#0">Overview</a>
<ul class="sidenav-v4__sub-list">
<li><a class="sidenav-v4__sub-link" href="#0">All Data</a></li>
<!-- ... -->
</ul>
</li>
<li class="sidenav-v4__item sidenav-v4__item--current"> <!-- 👈 -->
<a class="sidenav-v4__link js-sidenav-v4__link" href="#0">Notifications</a>
<ul class="sidenav-v4__sub-list">
<li>
<a class="sidenav-v4__sub-link" href="#0" aria-current="page">All Notifications</a> <!-- 👈 -->
</li>
<!-- ... -->
</ul>
</li>
</ul>
</nav>Important: On mobile, if a list item contains a sublist we replace the main link with a button that controls the sublist visibility. The button, created in JS, has the same link content and a .sidenav-v4__link--btn class.
<nav class="sidenav-v4 js-sidenav-v4">
<ul>
<li class="sidenav-v4__item">
<!--👇 this link is replaced by a button on mobile -->
<a class="sidenav-v4__link js-sidenav-v4__link" href="#0">
<svg class="sidenav-v4__icon icon" viewBox="0 0 20 20">
<!-- ... -->
</svg>
<span>Overview</span>
<svg class="sidenav-v4__arrow-icon icon margin-left-auto" viewBox="0 0 20 20">
<!-- ... -->
</svg>
</a>
<!--end link -->
<ul class="sidenav-v4__sub-list">
<!-- ... -->
</ul>
</li>
</ul>
</nav>
