This content originally appeared on CodyHouse and was authored by CodyHouse
Download + Demo
How to
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>
This content originally appeared on CodyHouse and was authored by CodyHouse
CodyHouse | Sciencx (2022-01-10T14:06:37+00:00) Component – Side Navigation v4. Retrieved from https://www.scien.cx/2022/01/10/component-side-navigation-v4/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.