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-navbar">
<ul class="flex gap-x-0.5">
<li>
<a href="#" class="nv-link">
<nv-icon name="home" size="md">
</nv-icon>
Home
</a>
</li>
<li>
<a href="#" class="nv-link">
<nv-icon name="layout-dashboard" size="md">
</nv-icon>
Dashboard
</a>
</li>
<li>
<a href="#" class="nv-link active">
<nv-icon name="stack" size="md">
</nv-icon>
Projects
<nv-icon name="chevron-down" size="sm">
</nv-icon>
</a>
</li>
<li>
<a href="#" class="nv-link">
<nv-icon name="stack" size="md">
</nv-icon>
Tasks
<span class="nv-badge bg-feedback-warning-high text-feedback-warning-high rounded-full w-5 flex items-center justify-center text-sm">
3
</span>
</a>
</li>
<li>
<a href="#" class="nv-link">
<nv-icon name="notebook" size="md">
</nv-icon>
Documentation
</a>
</li>
<li>
<a href="#" class="nv-link">
<nv-icon name="headset" size="md">
</nv-icon>
Support
</a>
</li>
<li>
<a href="#" class="nv-link disabled">
<nv-icon name="contract" size="md">
</nv-icon>
Contracts
</a>
</li>
</ul>
</nav>