Navbar
Create a navigation header, with support for responsive layout, branding, navigation links and more.
Contents
- Overview
- Basics
- Responsive Behaviors
- Supported Content
- Collapsible Content
- Color Schemes
- Containers
- Placement
- SASS Reference
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 arole="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 atsm
and up.navbar-expand-md
expands atmd
and up.navbar-expand-lg
expands atlg
and up.navbar-expand-xl
expands atxl
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.
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.
With the .navbar-brand
in the collapsing area.
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:
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.
Adding images to the .navbar-brand
will likely always require custom styles or utilities to properly size. Here are some examples to demonstrate.
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.
And because we use classes for our navs, you can avoid the list-based approach entirely if you like.
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.
Forms and Buttons
Place various form controls and components within a navbar with .form-inline
.
Align the contents of your inline forms with utilities as needed.
Input groups work, too:
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.
Text
Add normal text to your navbars with the help of .navbar-text
. This class adjusts vertical alignment for strings of text.
Using the utility classes, you can change the alignment and appearance of your navbar text.
You can also use utility classes to align navbar text to other navbar elements like the brand and navigation.
Disabled Links
Add .disabled
to a .nav-link
to indicate a disabled state.
Disabling Anchors
Please refer to the Accessiblity notes about disabled anchors.
Divider
Place a visual separator between segments of the navbar.
Collapsible Content
Our Collapse widget can also to toggle hidden content elsewhere on the page.
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.
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.
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.
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.
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-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.