Components

Reusable components built to provide alerts, button groups, cards, input groups, media objects, navigation, and much more.

Navbar

The navbar is a simple wrapper for positioning branding, navigation, and other elements into a concise navigation header. It's easily extensible and, with the help of our Collapse widget, it can easily integrate offscreen content.

Page Contents

Basics

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. Use optional containers to limit their horizontal width.
Navbars and their contents are built with flexbox, providing easy alignment options via flexbox utility and margin utility classes.
Navbars are responsive by default, but you can easily modify them to change that. Responsive behavior depends on our Collapse widget.
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.

Responsive Behaviors

Navbars are built with responsive design in mind. Using a .navbar-expand{-sm|-md|-lg|-xl} on the .navbar along with a .navbar-collapse container.

The following list gives a quick run-down of how the breakpoints are utilized.

No modifier, just .navbar, is never expanded
.navbar-expand is always expanded
.navbar-expand-sm expands at sm and up
.navbar-expand-md expands at md and up
.navbar-expand-lg expands at lg and up
.navbar-expand-xl expands at xl and up

Please refer to how our breakpoint nomenclature is used.

For the examples throughout this page, you will need to resize your browser window below/above the lg breakpoint to see the navbars switch between modes.

Never Expand

The most basic example of a .navbar is one that never expands, no matter the screen width.

<nav class="navbar navbar-light bg-faded">
  <button class="navbar-toggle collapsed" type="button" data-cfw="collapse" data-cfw-collapse-target="#navbarB0">
    <span aria-hidden="true">&#8801;</span>
  </button>
  <a href="#" class="navbar-brand ms-0_5">Never Expand</a>

  <div class="navbar-collapse collapse" id="navbarB0">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a href="#" class="nav-link active">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Link</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link disabled">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

<nav class="navbar navbar-light bg-faded flex-between">
  <a href="#" class="navbar-brand">Never Expand</a>
  <button class="navbar-toggle collapsed" type="button" data-cfw="collapse" data-cfw-collapse-target="#navbarB1">
    <span aria-hidden="true">&#8801;</span>
  </button>

  <div class="navbar-collapse collapse" id="navbarB1">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a href="#" class="nav-link active">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Link</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link disabled">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

Responsive Expand

Be default, navbars start out collapsed, but when the target breakpoint is reached, the navbar will expand into a horizontal row of elements.

<nav class="navbar navbar-expand-lg navbar-light bg-faded flex-between">
  <a href="#" class="navbar-brand">Navbar</a>
  <button class="navbar-toggle collapsed" type="button" data-cfw="collapse" data-cfw-collapse-target="#navbarR0">
    <span aria-hidden="true">&#8801;</span>
  </button>

  <div class="navbar-collapse collapse" id="navbarR0">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a href="#" class="nav-link active">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Link</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link disabled">Disabled</a>
      </li>
    </ul>
    <form class="form-inline ms-auto">
      <input class="form-control me-0_25" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-primary" type="submit">Search</button>
    </form>
  </div>
</nav>

With the .navbar-brand in the collapsing area.

<nav class="navbar navbar-expand-lg navbar-light bg-faded">
  <button class="navbar-toggle collapsed" type="button" data-cfw="collapse" data-cfw-collapse-target="#navbarR1">
    <span aria-hidden="true">&#8801;</span>
  </button>

  <div class="navbar-collapse collapse" id="navbarR1">
    <a href="#" class="navbar-brand">Navbar</a>
    <ul class="navbar-nav">
      <li class="nav-item">
        <a href="#" class="nav-link active">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Link</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link disabled">Disabled</a>
      </li>
    </ul>
    <form class="form-inline ms-auto">
      <input class="form-control me-0_25" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-primary" type="submit">Search</button>
    </form>
  </div>
</nav>

Supported Content

Navbars come with built-in support for a handful of sub-components. Mix and match from the following as you need:

.navbar-brand for your company, product, or project name.
.navbar-nav for navigation links (including support for dropdowns).
.form-inline for any form controls and actions.
.navbar-text for adding vertically aligned text content with support for recoloring, using color scheme.
.navbar-toggle for use with our Collapse widget and other navigation toggling behaviors.
.collapse.navbar-collapse for grouping and hiding navbar contents by a parent breakpoint.

Here's an example of some sub-components included in a default, light navbar:

<nav class="navbar navbar-expand-lg navbar-light bg-faded flex-between">
  <a href="#" class="navbar-brand">Navbar</a>
  <button class="navbar-toggle collapsed" type="button" data-cfw="collapse" data-cfw-collapse-target="#navbar0">
    <span aria-hidden="true">&#8801;</span>
  </button>

  <div class="navbar-collapse collapse" id="navbar0">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a href="#" class="nav-link active">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Link</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link disabled">Disabled</a>
      </li>
    </ul>
    <form class="form-inline ms-auto">
      <input class="form-control me-0_25" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-primary" type="submit">Search</button>
    </form>
  </div>
</nav>

Brand

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-faded">
  <a href="#" class="navbar-brand">Navbar</a>
</nav>

<nav class="navbar navbar-light bg-faded">
  <h1 class="navbar-brand mb-0">Navbar</h1>
</nav>

Adding images to the .navbar-brand will likely always require custom styles or utilities to properly size. Here are some examples to demonstrate.

<!-- Just an image -->
<nav class="navbar navbar-light bg-faded">
  <a class="navbar-brand" href="#">
    <img src="/assets/3.0/img/home.svg" width="30" height="30" alt="">
  </a>
</nav>

<!-- Image and text -->
<nav class="navbar navbar-light bg-faded">
  <a class="navbar-brand" href="#">
    <img src="/assets/3.0/img/home.svg" width="30" height="30" class="d-inline-block align-top" alt="">
    Navbar
  </a>
</nav>

Nav

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

Add .active directly to a .nav-link, to indicate a certain state, such as the current page.

<nav class="navbar navbar-expand-lg navbar-light bg-faded flex-between">
  <div class="navbar-brand">Navbar</div>
  <button class="navbar-toggle collapsed" type="button" data-cfw="collapse" data-cfw-collapse-target="#navbar1">
    <span aria-hidden="true">&#8801;</span>
  </button>

  <div class="navbar-collapse collapse" id="navbar1">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a href="#" class="nav-link active">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Features</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Pricing</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link disabled" tabindex="-1">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

And because we use classes for our navs, you can avoid the list-based approach entirely if you like.

<nav class="navbar navbar-expand-lg navbar-light bg-faded flex-between">
 <div class="navbar-brand">Navbar</div>
  <button class="navbar-toggle collapsed" type="button" data-cfw="collapse" data-cfw-collapse-target="#navbar2">
    <span aria-hidden="true">&#8801;</span>
  </button>

  <div class="navbar-collapse collapse" id="navbar2">
    <div class="navbar-nav">
      <a href="#" class="nav-item nav-link active">Home <span class="sr-only">(current)</span></a>
      <a href="#" class="nav-item nav-link">Features</a>
      <a href="#" class="nav-item nav-link">Pricing</a>
      <a href="#" class="nav-item nav-link disabled" tabindex="-1">Disabled</a>
    </div>
  </div>
</nav>

Dropdowns

You may also utilize the Dropdown widget in your navbar nav. Dropdown menus require a wrapping element for positioning, so be sure to use separate and nested elements for .nav-item and .nav-link as shown below.

If a dropdown is displayed in a non-expanded navbar, they will display 'inline' with the rest of the navbar menu.

<nav class="navbar navbar-expand-lg navbar-light bg-faded flex-between">
  <a href="#" class="navbar-brand">Navbar</a>
  <button class="navbar-toggle collapsed" type="button" data-cfw="collapse" data-cfw-collapse-target="#navbar3">
    <span aria-hidden="true">&#8801;</span>
  </button>

  <div class="navbar-collapse collapse" id="navbar3">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a href="#" class="nav-link active">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Link</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link disabled">Disabled</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" data-cfw="dropdown">Dropdown</a>
        <div class="dropdown-menu">
          <a href="#">Action</a>
          <a href="#">Another action</a>
          <a href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

Forms and Buttons

Place various form controls and components within a navbar with .form-inline.

<nav class="navbar navbar-light bg-faded">
  <form class="form-inline">
    <input class="form-control me-0_25" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-primary" type="submit">Search</button>
  </form>
</nav>

Align the contents of your inline forms with utilities as needed.

<nav class="navbar navbar-light bg-faded flex-between">
  <a href="#" class="navbar-brand">Navbar</a>
  <form class="form-inline">
    <input class="form-control me-0_25" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-primary" type="submit">Search</button>
  </form>
</nav>

Input groups work, too:

<nav class="navbar navbar-light bg-faded">
  <form class="form-inline">
    <div class="input-group">
      <span class="input-group-addon" id="basic-addon1">@</span>
      <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
    </div>
  </form>
</nav>

Various buttons are supported as part of these navbar forms, too. This is also a great reminder that vertical alignment utilities can be used to align different sized elements.

<nav class="navbar navbar-light bg-faded">
  <form class="form-inline">
    <button type="button" class="btn btn-outline-success me-0_25">Main button</button>
    <button type="button" class="btn btn-sm align-middle btn-outline-secondary">Smaller button</button>
  </form>
</nav>

Text

Add normal text to your navbars with the help of .navbar-text. This class adjusts vertical alignment for strings of text.

<nav class="navbar navbar-light bg-faded">
    <span class="navbar-text">Navbar text example</span>
</nav>

Using the utility classes, you can change the alignment and appearance of your navbar text.

<nav class="navbar navbar-light bg-faded flex-end">
    <span class="navbar-text text-danger">
        Navbar text aligned right
    </span>
</nav>

You can also use utility classes to align navbar text to other navbar elements like the brand and navigation.

<nav class="navbar navbar-expand-lg navbar-light bg-faded flex-between">
  <a href="#" class="navbar-brand">Navbar</a>
  <button class="navbar-toggle collapsed" type="button" data-cfw="collapse" data-cfw-collapse-target="#navbar6">
    <span aria-hidden="true">&#8801;</span>
  </button>

  <div class="navbar-collapse collapse flex-between" id="navbar6">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a href="#" class="nav-link active">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Link</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link disabled">Disabled</a>
      </li>
    </ul>
    <span class="navbar-text">
        Navbar text example
    </span>
  </div>
</nav>

Disabled Links

Add .disabled to a .nav-link to indicate a disabled state.

Disabling Anchors

Please refer to the Accessiblity notes about disabled anchors.

<nav class="navbar navbar-expand-lg navbar-light bg-faded flex-between">
  <a href="#" class="navbar-brand">Navbar</a>
  <button class="navbar-toggle collapsed" type="button" data-cfw="collapse" data-cfw-collapse-target="#navbar7">
    <span aria-hidden="true">&#8801;</span>
  </button>
  <div class="navbar-collapse collapse flex-between" id="navbar7">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a href="#" class="nav-link">Home</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link disabled" aria-disabled="true" tabindex="-1">Disabled</a>
      </li>
      <li class="nav-item">
        <span class="nav-link disabled">Disabled</span>
      </li>
    </ul>
  </div>
</nav>

<nav class="navbar navbar-expand-lg navbar-dark bg-inverse flex-between">
  <a href="#" class="navbar-brand">Navbar</a>
  <button class="navbar-toggle collapsed" type="button" data-cfw="collapse" data-cfw-collapse-target="#navbar8">
    <span aria-hidden="true">&#8801;</span>
  </button>
  <div class="navbar-collapse collapse flex-between" id="navbar8">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a href="#" class="nav-link">Home</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link disabled" aria-disabled="true" tabindex="-1">Disabled</a>
      </li>
      <li class="nav-item">
        <span class="nav-link disabled">Disabled</span>
      </li>
    </ul>
  </div>
</nav>

Divider

Place a visual separator between segments of the navbar.

<nav class="navbar navbar-expand-lg navbar-light bg-faded flex-between">
  <a href="#" class="navbar-brand">Navbar</a>
  <button class="navbar-toggle collapsed" type="button" data-cfw="collapse" data-cfw-collapse-target="#navbar9">
    <span aria-hidden="true">&#8801;</span>
  </button>

  <div class="navbar-collapse collapse flex-between" id="navbar9">
      <div class="navbar-nav">
      <a href="#" class="nav-item nav-link active">Home <span class="sr-only">(current)</span></a>
      <a href="#" class="nav-item nav-link">Features</a>
      <span class="navbar-divider"></span>
      <a href="#" class="nav-item nav-link">Pricing</a>
      <a href="#" class="nav-item nav-link">About</a>
    </div>
  </div>
</nav>

<nav class="navbar navbar-expand-lg navbar-dark bg-inverse flex-between">
  <a href="#" class="navbar-brand">Navbar</a>
  <button class="navbar-toggle collapsed" type="button" data-cfw="collapse" data-cfw-collapse-target="#navbar10">
    <span aria-hidden="true">&#8801;</span>
  </button>

  <div class="navbar-collapse collapse flex-between" id="navbar10">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a href="#" class="nav-link active">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-item nav-link">Features</a>
        </li>
        <li class="navbar-divider"></li>
        <li class="nav-item">
          <a href="#" class="nav-item nav-link">Pricing</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-item nav-link">About</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Collapsible Content

Our Collapse widget can also to toggle hidden content elsewhere on the page.

<nav class="navbar navbar-light bg-faded">
  <button class="navbar-toggle" type="button" data-cfw="collapse" data-cfw-collapse-target="#exCollapsingNavbar" aria-label="Toggle navigation">
    <span aria-hidden="true">&#8801;</span>
  </button>
  <div class="collapse w-100 mt-0_5" id="exCollapsingNavbar">
    <div class="bg-inverse p-1">
      <h4>Collapsed content</h4>
      Toggleable via the navbar button.
    </div>
  </div>
</nav>

Color Schemes

Theming the navbar has never been easier thanks to the combination of a simple link color modifier class and background-color utilities. Put another way, you specify light or dark and apply a background color.

Here are some examples to show what we mean.

<nav class="navbar navbar-dark bg-inverse">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-dark bg-primary">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
  <!-- Navbar content -->
</nav>

Containers

Although it's not required, you can wrap a navbar in a .container to center it on a page or add one within to only center the contents of a fixed or static top navbar.

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

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

Placement

Use our position utilities to place navbars in non-static positions. Choose from fixed to the top, fixed to the bottom, or stickied to the top (scrolls with the page until it reaches the top, then stays there). Fixed navbars use position: fixed, meaning they're pulled from the normal flow of the DOM and may require custom CSS (e.g., padding-top on the <body>) to prevent overlap with other elements.

Note: position: sticky, used for .sticky-top, isn't fully supported in every browser.

<nav class="navbar navbar-light bg-faded">
  <a href="#" class="navbar-brand">Static default</a>
</nav>

<nav class="navbar navbar-light bg-faded fixed-top">
  <a href="#" class="navbar-brand">Fixed top</a>
</nav>

<nav class="navbar navbar-light bg-faded fixed-bottom">
  <a href="#" class="navbar-brand">Fixed bottom</a>
</nav>

<nav class="navbar navbar-light bg-faded sticky-top">
  <a href="#" class="navbar-brand">Sticky top</a>
</nav>