Navbar
React 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.
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-light
) 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 children elements in .navbar
use flex layout and will default to
justify-content: space-between
. Use additional
flex utilities as needed to adjust this behavior.
White form for dark theme.
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.
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.
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
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.
Containers
Although it’s not required, you can wrap a navbar in a
MDBContainer
to center it on a page or add one within to only center the contents
of a fixed or static top navbar. Note that an inner container
is still required.
Use any of the responsive containers to change how wide the content in your navbar.
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 utilize .navbar-toggler
, .navbar-collapse
, and
.navbar-expand{-sm|-md|-lg|-xl|-xxl}
classes to change 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 in lowest 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 hidden content elsewhere on the
page. Because our plugin works on the
id
and data-mdb-target
matching, that’s easily done!
Navbar - API
Import
Properties
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.