Nav
JS Optional
Nav components show a vertical list of links.
Add a container element with the nav
class. And add child elements with the nav-item
class. The nav-item
with the active
class will be highlighted.
html
<ul class="nav">
<li class="nav-item">
<a href="#">Elements</a>
</li>
<li class="nav-item active">
<a href="#">Layout</a>
<ul class="nav">
<li class="nav-item">
<a href="#">Flexbox grid</a>
</li>
<li class="nav-item">
<a href="#">Responsive</a>
</li>
<li class="nav-item">
<a href="#">Navbar</a>
</li>
<li class="nav-item">
<a href="#">Empty states</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#">Components</a>
</li>
<li class="nav-item">
<a href="#">Utilities</a>
</li>
</ul>