They are useful when you have too many navigation items to display in a horizontal list on small (mobile or tablet) screen sizes. Alternatives to this approach include having the font size decrease on smaller screen sizes, hide navigation items that are not required or allow visitors to scroll horizontally.
Usage
Use .collapsible-nav
to have a .nav
element collapse on smaller screen sizes.
<ul class="nav collapsible-nav border-top border-bottom md:border-0">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item" aria-selected="true">
<a class="nav-link is-active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link is-disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
A dropdown style can be applied on smaller screen sizes using utilities.
<div class="border border-radius px-4 md:border-0">
<ul class="nav collapsible-nav" aria-expanded="false">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item" aria-selected="true">
<a class="nav-link is-active" href="#" aria-selected="false">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link is-disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>