Collapsible navs

Collapsible navs are a modification of the .nav element, transforming into a toggle-style navigation list on small screen sizes.

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.

Standard collapsible nav
View code 
<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.

Dropdown-style collapsible nav
View code 
<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>

Questions or feedback about this article? Let us know