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-buttongroup bg-level-00">
<ul class="flex">
<li>
<a href="/login" class="nv-link">
<nv-icon name="lock" size="md">
</nv-icon>
Login page
</a>
</li>
<li>
<a href="/form" class="nv-link active">
<nv-icon name="chart-dots" size="md">
</nv-icon>
Forms
</a>
</li>
<li>
<a href="/typo" class="nv-link">
<nv-icon name="feather" size="md">
</nv-icon>
Typos
</a>
</li>
<li>
<a href="#" class="nv-link disabled">
<nv-icon name="user" size="md">
</nv-icon>
Other
</a>
</li>
</ul>
</nav>