Figuration v4.4 is now available!

Navbar

Create a navigation header, with support for responsive layout, branding, navigation links and more.

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">
<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 href="#" class="nav-link disabled" tabindex="-1" 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">
<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 href="#" class="nav-link disabled" tabindex="-1" 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">
<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 href="#" class="nav-link disabled" tabindex="-1" aria-disabled="true">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-light">
<button class="navbar-toggle" 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" aria-current="page">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Link</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link disabled" tabindex="-1" aria-disabled="true">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-light flex-between">
<a href="#" class="navbar-brand">Navbar</a>
<button class="navbar-toggle" 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" aria-current="page">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Link</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link disabled" tabindex="-1" aria-disabled="true">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-light">
<a href="#" class="navbar-brand">Navbar</a>
</nav>

<nav class="navbar navbar-light bg-light">
<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-light">
<a class="navbar-brand" href="#">
<img src="/assets/4.1/img/home.svg" width="30" height="30" alt="">
</a>
</nav>
<!-- Image and text -->
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="/assets/4.1/img/home.svg" width="30" height="30" class="d-inline-block align-top" alt="">
Navbar
</a>
</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">
<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 href="#" class="nav-link disabled" tabindex="-1" 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">
<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 href="#" class="nav-link disabled" tabindex="-1" aria-disabled="true">Disabled</a>
</div>
</div>
</nav>

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">
<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 href="#" class="nav-link disabled" tabindex="-1" 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 with .form-inline.

<nav class="navbar navbar-light bg-light">
<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-light 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-light">
<form class="form-inline">
<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 class="form-inline">
<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">
<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 href="#" class="nav-link disabled" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<span class="navbar-text">
Navbar text example
</span>
</div>
</nav>

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-light flex-between">
<a href="#" class="navbar-brand">Navbar</a>
<button class="navbar-toggle" 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" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
<li class="nav-item">
<span class="nav-link disabled" aria-disabled="true">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">
<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" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
<li class="nav-item">
<span class="nav-link disabled" aria-disabled="true">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">
<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">
<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.

Collapsed content

Toggleable via the navbar button.
<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.

The quick brown fox jumped over the lazy dog.

<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.

Name Type Default Description
$enable-navbar boolean true Enable the generation of the navbar classes. Smaller segements of the navbar classes can be disabled with the following $enable-* variables.
$enable-navbar-brand boolean true Enable the generation of navbar brand classes.
$enable-navbar-nav boolean true Enable the generation of navbar nav classes.
$enable-navbar-text boolean true Enable the generation of navbar text classes.
$enable-navbar-divider boolean true Enable the generation of navbar divider classes.
$enable-navbar-collapse boolean true Enable the generation of navbar collapse classes.
$enable-navbar-toggle boolean true Enable the generation of navbar toggle classes.
$enable-navbar-light boolean true Enable the generation of color overrides for use on a navbar with a light background color.
$enable-navbar-dark boolean true Enable the generation of color overrides for use on a navbar with a dark background color.
$navbar-padding-y string ($spacer / 2) Vertical padding for navbar.
$navbar-padding-x string $spacer Horizontal padding for navbar.
$navbar-item-padding-y string .3125rem Vertical padding for .nav-link items within navbar.
$navbar-item-padding-x string .5rem Horizontal padding for .nav-link items within navbar.
$navbar-brand-padding-y string .125rem Vertical padding for navbar brand.
$navbar-brand-padding-x string 1rem Horizontal padding for navbar brand.
$navbar-brand-font-size string ($font-size-base * 1.25) Font size for navbar brand.
$navbar-brand-font-weight string $font-weight-bold Font weight for navbar brand.
$navbar-divider-width string $border-width Border width for navbar divider.
$navbar-divider-color string rgba($black, .65) Border color for navbar divider.
$navbar-divider-margin-y string .25rem Vertical spacing for navbar divider.
$navbar-divider-margin-x string .25rem Horizontal spacing for navbar divider.
$navbar-toggle-font-size string ($font-size-base * 1.25) Font size for navbar toggle.
$navbar-toggle-padding-y string $btn-padding-y Vertical spacing for navbar toggle.
$navbar-toggle-padding-x string $btn-padding-x Horizontal spacing for navbar toggle.
$navbar-toggle-border-radius string $btn-border-radius Border radius for navbar toggle.
$navbar-toggle-focus-box-shadow string 0 0 0 .1875rem Box shadow for navbar toggle in focus state.
$navbar-toggle-transition string box-shadow .15s ease-in-out Transition effect for navbar toggle button.
$navbar-expand-breakpoints list map-keys($grid-breakpoints) Breakpoints to generate the rules for expanding navbars.
$navbar-light-color string rgba($black, .6) Text color override for use on a navbar with a light background color.
$navbar-light-hover-color string rgba($black, .85) Text color override in hover or focus state for use on a navbar with a light background color.
$navbar-light-active-color string rgba($black, .95) Text color override in active state for use on a navbar with a light background color.
$navbar-light-disabled-color string rgba($black, .5) Text color override in disabled state for use on a navbar with a light background color.
$navbar-light-divider-color string rgba($black, .65) Divider border color override for use on a navbar with a light background color.
$navbar-light-toggle-border string rgba($black, .35) Toggle border color override for use on a navbar with a light background color.
$navbar-light-brand-color string $navbar-light-active-color Brand text color override for use on a navbar with a light background color.
$navbar-light-disabled-color string $navbar-light-active-color Brand text color override in hover or focus state for use on a navbar with a light background color.
$navbar-dark-color string rgba($white, .65) Text color override for use on a navbar with a dark background color.
$navbar-dark-hover-color string rgba($white, .9) Text color override in hover or focus state for use on a navbar with a dark background color.
$navbar-dark-active-color string rgba($white, .95) Text color override in active state for use on a navbar with a dark background color.
$navbar-dark-disabled-color string rgba($white, .5) Text color override in disabled state for use on a navbar with a dark background color.
$navbar-dark-divider-color string rgba($white, .7) Divider border color override for use on a navbar with a dark background color.
$navbar-dark-toggle-border string rgba($white, .35) Toggle border color override for use on a navbar with a dark background color.
$navbar-dark-brand-color string $navbar-dark-active-color Brand text color override for use on a navbar with a dark background color.
$navbar-dark-disabled-color string $navbar-dark-active-color Brand text color override in hover or focus state for use on a navbar with a dark background color.

Mixins

No mixins available.