Navbar

Responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin. Read the Official Bootstrap Documentation for a full list of instructions and other options.

Basic Navbar

Here’s an example of all the sub-components included in a responsive light-themed navbar that automatically collapses at the large breakpoint.

<nav class="navbar navbar-expand-lg bg-gray-100 bd">
  <a class="navbar-brand tx-bold tx-spacing--2 order-1" href="#">LOGO</a>
  <button class="navbar-toggler order-2" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <i data-feather="menu" class="wd-20 ht-20"></i>
  </button>

  <div class="collapse navbar-collapse order-2" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
    <form class="form-inline mg-t-10 mg-lg-0">
      <input class="form-control wd-150-f mg-r-5" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-primary" type="submit">Search</button>
    </form>
  </div>
</nav>

Brand Content

The .navbar-brand can be applied to most elements, but an anchor works best as some elements might require utility classes or custom styles.

<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
</nav>

Nav Content

Navbar navigation links build on our nav options with their own modifier class and require the use of toggler classes for proper responsive styling.

<nav class="navbar navbar-expand-lg navbar-light bg-light bd">
  <a class="navbar-brand tx-bold tx-spacing--2" href="#">LOGO</a>
  <button class="navbar-toggler order-2" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <i data-feather="menu" class="wd-20 ht-20"></i>
  </button>
  <div class="collapse navbar-collapse order-2" id="navbarNav">
    <ul class="navbar-nav">...</ul>
  </div>
</nav>

Form Content

Place various form controls and components within a navbar.

<nav class="navbar navbar-light bg-light">
  <form class="form-inline mg-l-auto">
    <input class="form-control mg-r-5" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-primary" type="submit">Search</button>
  </form>
</nav>

Text Content

Navbars may contain bits of text with the help of .navbar-text. This class adjusts vertical alignment and horizontal spacing for strings of text.

<nav class="navbar navbar-light bg-light">
  <span class="navbar-text">
    Navbar text with an inline element
  </span>
</nav>

Color Scheme

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">...</nav>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">...</nav>

Components