Navbar

Overview

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.

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.
• Indicate the current item by using aria-current="page" for the current page or aria-current="true" for the current item in a set.

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-toggle control, and a .navbar-collapse container, you can determine when their content collapses behind a button. In combination with other utilities, you can easily choose when to show or hide particular elements.

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-light">
  <button class="navbar-toggle" type="button" data-cfw="collapse" data-cfw-collapse-target="#navbarB0" aria-label="Toggle navigation">
    <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" aria-current="page">Home</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" aria-disabled="true">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

<nav class="navbar navbar-light bg-light flex-between">
  <a href="#" class="navbar-brand">Never Expand</a>
  <button class="navbar-toggle" type="button" data-cfw="collapse" data-cfw-collapse-target="#navbarB1" aria-label="Toggle navigation">
    <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" aria-current="page">Home</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" aria-disabled="true">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-light flex-between">
  <a href="#" class="navbar-brand">Navbar</a>
  <button class="navbar-toggle" type="button" data-cfw="collapse" data-cfw-collapse-target="#navbarR0" aria-label="Toggle navigation">
    <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" aria-current="page">Home</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="d-flex">
      <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-light">
  <button class="navbar-toggle" type="button" data-cfw="collapse" data-cfw-collapse-target="#navbarR1" aria-label="Toggle navigation">
    <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" aria-current="page">Home</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="d-flex">
      <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>

Offcanvas

Add an offcanvas drawer with the Offcanvas widget. The offcanvas styles are adjusted when contained within a navbar, and with use of .navbar-expand-* classes, you can create flexible and respsonsive navigation.

To create an offcanvas navbar that is always collapsed, simply leave off the .navbar-expand-* class from the .navbar element.

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid flex-between">
    <a class="navbar-brand" href="#">Offcanvas navbar</a>
    <button class="navbar-toggle" type="button" data-cfw="offcanvas" data-cfw-offcanvas-target="#offcanvasNavbar" aria-label="Toggle navigation">
        <span aria-hidden="true">&#8801;</span>
    </button>
    <div id="offcanvasNavbar" class="offcanvas offcanvas-end">
      <div class="offcanvas-header">
        <h4 class="offcanvas-title h5">Offcanvas navbar example</h4>
        <button type="button" class="close" data-cfw-dismiss="offcanvas" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
      <div class="offcanvas-body">
        <ul class="navbar-nav flex-end flex-grow-1 pe-1">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link" href="#" role="button" data-cfw="dropdown">
              Dropdown
              <span class="caret" aria-hidden="true"></span>
            </a>
            <ul class="dropdown-menu mb-1">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li>
                <hr class="dropdown-divider">
              </li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
            </ul>
          </li>
        </ul>
        <form class="d-flex mt-1" role="search">
          <input class="form-control me-0_5" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-info" type="submit">Search</button>
        </form>
      </div>
    </div>
  </div>
</nav>

To create an offcanvas navbar that expands into a normal navbar at a specific breakpoint like lg, use .navbar-expand-lg.

For a working example, please check out the Offcanvas Navbar example.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid flex-between">
    <a class="navbar-brand" href="#">Offcanvas navbar</a>
    <button class="navbar-toggle" type="button" data-cfw="offcanvas" data-cfw-offcanvas-target="#offcanvasNavbar" aria-label="Toggle navigation">
        <span aria-hidden="true">&#8801;</span>
    </button>
    <div id="offcanvasNavbar" class="offcanvas offcanvas-end">
      ...
    </div>
  </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).
• .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-light flex-between">
  <a href="#" class="navbar-brand">Navbar</a>
  <button class="navbar-toggle" type="button" data-cfw="collapse" data-cfw-collapse-target="#navbar0" aria-label="Toggle navigation">
    <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" aria-current="page">Home</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="d-flex">
      <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.

Text

Add your text within an element with the .navbar-brand class.

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

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

Image

You can replace the text within the .navbar-brand with an <img>.

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

Image and Text

You can also make use of some additional utilities to add an image and text at the same time. Note the addition of .d-inline-block and .valign-text-top on the <img>.

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

Nav

Navbar navigation builds on some of the .nav options with their own modifier class and require the use of toggle 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-light flex-between">
  <div class="navbar-brand">Navbar</div>
  <button class="navbar-toggle" type="button" data-cfw="collapse" data-cfw-collapse-target="#navbar1" aria-label="Toggle navigation">
    <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" aria-current="page">Home</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 class="nav-link disabled" aria-disabled="true">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-light flex-between">
 <div class="navbar-brand">Navbar</div>
  <button class="navbar-toggle" type="button" data-cfw="collapse" data-cfw-collapse-target="#navbar2" aria-label="Toggle navigation">
    <span aria-hidden="true">&#8801;</span>
  </button>

  <div class="navbar-collapse collapse" id="navbar2">
    <div class="navbar-nav">
      <a href="#" class="nav-link active" aria-current="page">Home</a>
      <a href="#" class="nav-link">Features</a>
      <a href="#" class="nav-link">Pricing</a>
      <a class="nav-link disabled" aria-disabled="true">Disabled</a>
    </div>
  </div>
</nav>

Dropdowns

You can also use the Dropdown widget in your navbar. 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-light flex-between">
  <a href="#" class="navbar-brand">Navbar</a>
  <button class="navbar-toggle" type="button" data-cfw="collapse" data-cfw-collapse-target="#navbar3" aria-label="Toggle navigation">
    <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" aria-current="page">Home</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" aria-disabled="true">Disabled</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link" href="#" data-cfw="dropdown">Dropdown<span class="caret" aria-hidden="true"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

Forms and Buttons

Place various form controls and components within a navbar.

<nav class="navbar navbar-light bg-light">
  <form class="d-flex">
    <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>

Immediate child elements of .navbar use flex layout. Align the contents of your inline forms with flexbox utilities as needed.

<nav class="navbar navbar-light bg-light flex-between">
  <a href="#" class="navbar-brand">Navbar</a>
  <form class="d-flex">
    <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. If your navbar is an entire form, or mostly a form, you can use the <form> element as the container and save some HTML.

<nav class="navbar navbar-light bg-light">
  <form class="container-fluid">
    <div class="input-group">
      <span class="input-group-text" 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-light">
  <form>
    <button type="button" class="btn btn-outline-success me-0_25">Main button</button>
    <button type="button" class="btn btn-small 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-light">
  <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-light 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-light flex-between">
  <a href="#" class="navbar-brand">Navbar</a>
  <button class="navbar-toggle" type="button" data-cfw="collapse" data-cfw-collapse-target="#navbar6" aria-label="Toggle navigation">
    <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" aria-current="page">Home</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" aria-disabled="true">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.

<nav class="navbar navbar-expand-lg navbar-light bg-light flex-between">
  <a href="#" class="navbar-brand">Navbar</a>
  <button class="navbar-toggle" type="button" data-cfw="collapse" data-cfw-collapse-target="#navbar7" aria-label="Toggle navigation">
    <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 class="nav-link disabled" aria-disabled="true">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-dark flex-between">
  <a href="#" class="navbar-brand">Navbar</a>
  <button class="navbar-toggle" type="button" data-cfw="collapse" data-cfw-collapse-target="#navbar8" aria-label="Toggle navigation">
    <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 class="nav-link disabled" aria-disabled="true">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-light flex-between">
  <a href="#" class="navbar-brand">Navbar</a>
  <button class="navbar-toggle" type="button" data-cfw="collapse" data-cfw-collapse-target="#navbar9" aria-label="Toggle navigation">
    <span aria-hidden="true">&#8801;</span>
  </button>

  <div class="navbar-collapse collapse flex-between" id="navbar9">
    <div class="navbar-nav">
      <a href="#" class="nav-link active" aria-current="page">Home</a>
      <a href="#" class="nav-link">Features</a>
      <span class="navbar-divider"></span>
      <a href="#" class="nav-link">Pricing</a>
      <a href="#" class="nav-link">About</a>
    </div>
  </div>
</nav>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark flex-between">
  <a href="#" class="navbar-brand">Navbar</a>
  <button class="navbar-toggle" type="button" data-cfw="collapse" data-cfw-collapse-target="#navbar10" aria-label="Toggle navigation">
    <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" aria-current="page">Home</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Features</a>
      </li>
      <li class="navbar-divider"></li>
      <li class="nav-item">
        <a href="#" class="nav-link">Pricing</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">About</a>
      </li>
    </ul>
  </div>
</nav>

Collapsible Content

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

Consider using the available follow option to move the focus programmatically to the container when it is opened. Otherwise, keyboard users and users of assistive technologies will likely have a hard time finding the newly revealed content, particularly if the container that was opened comes before the toggle in the document's structure. In theory, this will allow assistive technology users to jump directly from the toggle to the container it controls, but support for this is inconsitent.

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

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-dark">
  <!-- 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 center the contents of navbar.

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

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

There may also be instances where you may need to reset the padding on the .navbar to align with other .container wrapped content.

<nav class="navbar navbar-light bg-light px-0">
  <div class="container">
    <a href="#" class="navbar-brand">Navbar</a>
  </div>
</nav>
<div class="container">
    <p>The quick brown fox jumped over the lazy dog.</p>
</div>

Use any of the responsive containers to change how wide the content in your navbar is presented.

<nav class="navbar navbar-light bg-light">
  <div class="container-md">
    <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-light">
  <a href="#" class="navbar-brand">Static default</a>
</nav>

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

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

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

SASS Reference

Variables

The available Customization options, or Sass variables, that can be customized for navbar components.

Mixins

No mixins available.