For Developers
This is purely layout markup — no JS logic is included.
Active state
To display one item as active, add the class “active” to the anchor.
Disabled state
To display one item as disabled, add the class “disabled” to the anchor.
Example
<nav class="nv-sidenav flex flex-1 flex-col">
<ul role="list" class="flex flex-1 flex-col gap-y-0.5">
<li>
<a href="/login" class="nv-link">
<nv-icon role="img" aria-label="home-icon" name="home" size="md">
</nv-icon>
Home
</a>
</li>
<li>
<a href="/form" class="nv-link active">
<nv-icon role="img" aria-label="layout-dashboard-icon" name="layout-dashboard" size="md">
</nv-icon>
Dashboard
</a>
</li>
<li class="collapsible">
<a href="/typo" class="nv-link">
<span class="flex items-center gap-x-2">
<nv-icon role="img" aria-label="stack-icon" name="stack" size="md">
</nv-icon>
Projects
</span>
<nv-iconbutton class="nv-iconbutton" size="md" name="chevron-down" emphasis="lower">
</nv-iconbutton>
</a>
</li>
<li>
<a href="#" class="nv-link">
<nv-icon role="img" aria-label="checklist-icon" name="checklist" size="md">
</nv-icon>
Tasks
</a>
</li>
<li>
<a href="#" class="nv-link">
<nv-icon role="img" aria-label="notebook-icon" name="notebook" size="md">
</nv-icon>
Documentation
</a>
</li>
<li>
<a href="#" class="nv-link">
<nv-icon role="img" aria-label="headset-icon" name="headset" size="md">
</nv-icon>
Support
</a>
</li>
<li>
<a href="#" class="nv-link disabled">
<nv-icon role="img" aria-label="contract-icon" name="contract" size="md">
</nv-icon>
Contracts
</a>
</li>
</ul>
</nav>