Navbar
Bootstrap 5 Navbar component
Documentation and examples for powerful, responsive navigation header - MDB navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.
Video tutorial
Basic example
A basic example of the navbar with the most common elements like link, search form, brand, and dropdown. All of them are explained in detail in the supported content section.
Note: this example uses
color
(bg-body-tertiary
) and
spacing
(my-2
, my-lg-0
, me-sm-0
, my-sm-0
) utility
classes.
How it works
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|-xxl}
for responsive collapsing and color scheme classes. - Navbars and their contents are fluid by default. Change the container to limit their horizontal width in different ways.
- Use our spacing and flex utility classes for controlling spacing and alignment within navbars.
- Navbars are responsive by default, but you can easily modify them to change that. Responsive behavior depends on our Collapse JavaScript plugin.
-
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. -
Indicate the current item by using
aria-current="page"
for the current page oraria-current="true"
for the current item in a set.
Supported content
Navbars come with built-in support for a handful of sub-components. Choose from the following as needed:
.navbar-brand
for your company, product, or project name.-
.navbar-nav
for a full-height and lightweight navigation (including support for dropdowns). -
.navbar-toggler
for use with our collapse plugin and other navigation toggling behaviors. - Flex and spacing utilities for any form controls and actions.
.navbar-text
for adding vertically centered strings of text.-
.collapse.navbar-collapse
for grouping and hiding navbar contents by a parent breakpoint.
Apart from listed above, navbar supports also components like breadcrumbs, forms, buttons, icons, flags, avatars, badges, and a few more.
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.
Forms
Place various form controls and components within a navbar:
Immediate child elements of .navbar
use flex layout and will default to
justify-content: space-between
. Use additional
flex utilities
as needed to adjust this behavior.
Text
Navbars may contain bits of text with the help of
.navbar-text
. This class adjusts vertical alignment and horizontal spacing for
strings of text.
Mix and match with other components and utilities as needed.
Dropdown
You can also use dropdowns 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.
Learn more about dropdowns in our dropdown docs.
Icons
Choose from hundreds of our icons and simply add them to the navbar.
Note: We add .d-flex .flex-row
classes to keep the icons
inline when the navbar is collapsed. Without this, they will stack one under another.
Badges
Badges can be very useful for presenting counters, for example in the shopping cart.
Notifications
You can mix icon with dropdown and create a notification dropdown to indicate important news
for visitors. Add
.hidden-arrow
class to hide a dropdown arrow.
Flags
Use dropdown together with flags to create a language switch.
Avatar
By combining simple image and dropdown you can create an avatar with typical user options.
Content alignment
To align navbar content to the right or left use
me-auto
or ms-auto
classes. For content centering use
flexbox
utilities.
Left aligned
Add .me-auto
class next to the .navbar-nav
to align the content to
the left.
Right aligned
Add .ms-auto
class next to the .navbar-nav
to align the content to
the right.
Centered
Remove .ms-auto
or .me-auto
class and add
.justify-content-center
next to the .navbar-collapse
to center the
content.
Colors
Sample colors
Theming the navbar has never been easier thanks to the combination of theming classes and
background-color
utilities. Choose from .navbar-light
for use with
light background colors, or .navbar-dark
for dark background colors. Then,
customize with .bg-*
utilities.
See also our color docs to learn more about colors.
Secondary icons
The secondary icons on a white background give a light, soft look. They are also helpful in keeping the navbar and sidenav appear consistent as they are the same color as the icons in sidenav.
Add .link-secondary
class to the link to change the color.
Containers
Although it’s not required, you can wrap a navbar in a
.container
to center it on a page–though note that an inner container is still
required. Or you can add a container inside the .navbar
to only center the
contents of a fixed or static top navbar.
Use any of the responsive containers to change how wide the content in your navbar is presented.
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.
Also note that
.sticky-top
uses position: sticky
, which
isn’t fully supported in every browser.
Responsive behaviors
Navbars can use .navbar-toggler
, .navbar-collapse
, and
.navbar-expand{-sm|-md|-lg|-xl|-xxl}
classes to determine when their content
collapses behind a button. In combination with other utilities, you can easily choose when to
show or hide particular elements.
For navbars that never collapse, add the
.navbar-expand
class on the navbar. For navbars that always collapse, don’t add
any .navbar-expand
class.
Toggler
Navbar togglers are left-aligned by default, but should they follow a sibling element like a
.navbar-brand
, they’ll automatically be aligned to the far right. Reversing
your markup will reverse the placement of the toggler. Below are examples of different
toggle styles.
With no .navbar-brand
shown at the smallest breakpoint:
With a brand name shown on the left and toggler on the right:
With a toggler on the left and brand name on the right:
External content
Sometimes you want to use the collapse plugin to trigger a container element for content
that structurally sits outside of the
.navbar
. Because our plugin works on the id
and
data-mdb-target
matching, that’s easily done!
Advanced examples
Advanced examples of navbars usage.
Facebook style
A typical example of Facebook navbar usage - 3 columns with icons and distinctive notifications plus a search field on the left.
Navbar - API
CSS variables
As part of MDB’s evolving CSS variables approach, navbar now uses local CSS variables on
.navbar
for enhanced real-time customization. Values for the CSS variables
are set via Sass, so Sass customization is still supported, too.