Navbar

Documentation and examples for Grayshift’s powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.

How it works

Here’s what you need to know before getting started with the navbar:

  • Navbars require a wrapping .navbar with .navbar-expand{-sm|-md|-lg|-xl} for responsive collapsing and color scheme classes.
  • Navbars and their contents are fluid by default. Change the container to limit their horizontal width in different ways.
  • Use our spacing and flex utility classes for controlling spacing and alignment within navbars.
  • Navbars are responsive by default, but you can easily modify them to change that. Responsive behavior depends on our Collapse JavaScript plugin.
  • Ensure accessibility by using a <nav> element or, if using a more generic element such as a <div>, add a role="navigation" to every navbar to explicitly identify it as a landmark region for users of assistive technologies.
  • Indicate the current item by using aria-current="page" for the current page or aria-current="true" for the current item in a set.

Supported content

Navbars come with built-in support for a handful of sub-components. Choose from the following as needed:

  • .navbar-nav for a full-height and lightweight navigation (including support for dropdowns).
  • .navbar-toggler for use with our collapse plugin and other navigation toggling behaviors.
  • .collapse.navbar-collapse for grouping and hiding navbar contents by a parent breakpoint.

Here’s an example of all the sub-components included in a responsive navbar that automatically collapses at the xl (extra-large) breakpoint.

<nav class="navbar navbar-expand-xl">
  <div class="container">
    <a class="link-body" href="#">
      <svg class="gi gi-grayshift" width="3rem" height="3rem" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
        <path d="M4.93 4.93c3.905-3.905 10.237-3.905 14.142 0s3.905 10.237 0 14.142-10.237 3.905-14.142 0-3.905-10.237 0-14.142zM12 6.343a4 4 0 0 0-5.657 0 8 8 0 0 0 0 11.314c.58.58 1.226 1.052 1.915 1.416a4 4 0 0 1 .914-4.244h0L12 12a4 4 0 0 0 0-5.657zm4.596 8.132a1.5 1.5 0 1 0-2.121 2.121 1.5 1.5 0 1 0 2.121-2.121zM10.232 8.11a1.5 1.5 0 0 1-2.121 2.121 1.5 1.5 0 0 1 2.121-2.121z"/>
      </svg>
    </a>
    <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarSupportedContent" type="button" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle Navigation">
      <svg class="gi gi-menu fs-xl" width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
        <path d="M4 6h16a1 1 0 1 1 0 2H4a1 1 0 1 1 0-2zm0 5h16a1 1 0 1 1 0 2H4a1 1 0 1 1 0-2zm0 5h16a1 1 0 1 1 0 2H4a1 1 0 1 1 0-2z"/>
      </svg>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mb-5 mr-xl-5 mb-xl-0">
        <li class="nav-item">
          <a class="nav-link active" href="#" aria-current="page">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link" id="navbarDropdownOne" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown<svg class="gi gi-arrow-down ml-1 align-text-top" width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
            <path d="M10.882 16.158a2 2 0 0 0 2.565-.279l.114-.13 4-5a2 2 0 0 0-1.412-3.244L16 7.5H8a2 2 0 0 0-1.659 3.117l.097.132 4 5a2 2 0 0 0 .201.216l.112.096.132.097z"/>
          </svg></a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdownOne">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
          </div>
        </li>
      </ul>
      <form>
        <div class="input-group">
          <div class="input-group-item">
            <svg class="gi gi-search fs-md" width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
              <path d="M11 3a8 8 0 0 1 8 8c0 1.848-.627 3.55-1.68 4.905l3.386 3.388a1 1 0 0 1-1.32 1.497l-.094-.083-3.388-3.386C14.55 18.373 12.848 19 11 19a8 8 0 1 1 0-16zm0 2a6 6 0 1 0 0 12 6 6 0 1 0 0-12z"/>
            </svg>
          </div>
          <input class="form-control" type="search" placeholder="Search" aria-label="Search">
        </div>
      </form>
    </div>
  </div>
</nav>

This example uses spacing (mb-5, mr-xl-5, mb-xl-0) utility classes.

Responsive behaviors

Navbars can utilize .navbar-toggler, .navbar-collapse, and .navbar-expand{-sm|-md|-lg|-xl} classes to change when their content collapses behind a button. In combination with other utilities, you can easily choose when to show or hide particular elements.

For navbars that never collapse, add the .navbar-expand class on the navbar. For navbars that always collapse, don’t add any .navbar-expand class.