Navbar
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.
- HTML
<!-- Navbar --> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <!-- Container wrapper --> <div class="container-fluid"> <!-- Toggle button --> <button class="navbar-toggler" type="button" data-mdb-toggle="collapse" data-mdb-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" > <i class="fas fa-bars"></i> </button> <!-- Collapsible wrapper --> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <!-- Navbar brand --> <a class="navbar-brand mt-2 mt-lg-0" href="#"> <img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.webp" height="15" alt="" loading="lazy" /> </a> <!-- Left links --> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <li class="nav-item"> <a class="nav-link" href="#">Dashboard</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Team</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Projects</a> </li> </ul> <!-- Left links --> </div> <!-- Collapsible wrapper --> <!-- Right elements --> <div class="d-flex align-items-center"> <!-- Icon --> <a class="text-reset me-3" href="#"> <i class="fas fa-shopping-cart"></i> </a> <!-- Notifications --> <a class="text-reset me-3 dropdown-toggle hidden-arrow" href="#" id="navbarDropdownMenuLink" role="button" data-mdb-toggle="dropdown" aria-expanded="false" > <i class="fas fa-bell"></i> <span class="badge rounded-pill badge-notification bg-danger">1</span> </a> <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownMenuLink" > <li> <a class="dropdown-item" href="#">Some news</a> </li> <li> <a class="dropdown-item" href="#">Another news</a> </li> <li> <a class="dropdown-item" href="#">Something else here</a> </li> </ul> <!-- Avatar --> <a class="dropdown-toggle d-flex align-items-center hidden-arrow" href="#" id="navbarDropdownMenuLink" role="button" data-mdb-toggle="dropdown" aria-expanded="false" > <img src="https://mdbootstrap.com/img/new/avatars/2.webp" class="rounded-circle" height="25" alt="" loading="lazy" /> </a> <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownMenuLink" > <li> <a class="dropdown-item" href="#">My profile</a> </li> <li> <a class="dropdown-item" href="#">Settings</a> </li> <li> <a class="dropdown-item" href="#">Logout</a> </li> </ul> </div> <!-- Right elements --> </div> <!-- Container wrapper --> </nav> <!-- Navbar -->
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.
- HTML
<!-- As a link --> <nav class="navbar navbar-light bg-light"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> </div> </nav> <!-- As a heading --> <nav class="navbar navbar-light bg-light"> <div class="container-fluid"> <span class="navbar-brand mb-0 h1">Navbar</span> </div> </nav>
Adding images to the .navbar-brand
will likely always require custom styles or utilities to properly size. Here are some examples to demonstrate.
- HTML
<!-- Just an image --> <nav class="navbar navbar-light bg-light"> <div class="container"> <a class="navbar-brand" href="#"> <img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.webp" height="20" alt="" loading="lazy" /> </a> </div> </nav>
- HTML
<!-- Image and text --> <nav class="navbar navbar-light bg-light"> <div class="container-fluid"> <a class="navbar-brand" href="#"> <img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.webp" class="me-2" height="20" alt="" loading="lazy" /> <small>MDBootstrap</small> </a> </div> </nav>
Nav
Navbar navigation links build on our .nav
options with their own modifier class and require the use of toggler classes for proper responsive styling. Navigation in navbars will also grow to occupy as much horizontal space as possible to keep your navbar contents securely aligned.
Active states—with .active
—to indicate the current page can be applied directly to .nav-link
s or their immediate parent .nav-item
s.
Please note that you should also add the aria-current
attribute on the .nav-link
itself.
- HTML
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-mdb-toggle="collapse" data-mdb-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" > <i class="fas fa-bars"></i> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <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="#">Features</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true" >Disabled</a > </li> </ul> </div> </div> </nav>
And because we use classes for our navs, you can avoid the list-based approach entirely if you like.
- HTML
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-mdb-toggle="collapse" data-mdb-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation" > <i class="fas fa-bars"></i> </button> <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> <div class="navbar-nav"> <a class="nav-link active" aria-current="page" href="#">Home</a> <a class="nav-link" href="#">Features</a> <a class="nav-link" href="#">Pricing</a> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true" >Disabled</a > </div> </div> </div> </nav>
Forms
Place various form controls and components within a navbar:
- HTML
<nav class="navbar navbar-light bg-light"> <div class="container-fluid"> <form class="d-flex input-group w-auto"> <input type="search" class="form-control rounded" placeholder="Search" aria-label="Search" aria-describedby="search-addon" /> <span class="input-group-text border-0" id="search-addon"> <i class="fas fa-search"></i> </span> </form> </div> </nav>
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.
- HTML
<nav class="navbar navbar-light bg-light"> <div class="container-fluid"> <a class="navbar-brand">Navbar</a> <form class="d-flex input-group w-auto"> <input type="search" class="form-control rounded" placeholder="Search" aria-label="Search" aria-describedby="search-addon" /> <span class="input-group-text border-0" id="search-addon"> <i class="fas fa-search"></i> </span> </form> </div> </nav>
White form for dark theme.
- HTML
<nav class="navbar navbar-dark bg-dark"> <div class="container-fluid"> <form class="d-flex input-group w-auto"> <input type="search" class="form-control rounded" placeholder="Search" aria-label="Search" aria-describedby="search-addon" /> <span class="input-group-text text-white border-0" id="search-addon"> <i class="fas fa-search"></i> </span> </form> </div> </nav>
Buttons
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.
- HTML
<!-- Navbar --> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <!-- Container wrapper --> <div class="container"> <!-- Navbar brand --> <a class="navbar-brand me-2" href="https://mdbgo.com/"> <img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.webp" height="16" alt="" loading="lazy" style="margin-top: -1px;" /> </a> <!-- Toggle button --> <button class="navbar-toggler" type="button" data-mdb-toggle="collapse" data-mdb-target="#navbarButtonsExample" aria-controls="navbarButtonsExample" aria-expanded="false" aria-label="Toggle navigation" > <i class="fas fa-bars"></i> </button> <!-- Collapsible wrapper --> <div class="collapse navbar-collapse" id="navbarButtonsExample"> <!-- Left links --> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <li class="nav-item"> <a class="nav-link" href="#">Dashboard</a> </li> </ul> <!-- Left links --> <div class="d-flex align-items-center"> <button type="button" class="btn btn-link px-3 me-2"> Login </button> <button type="button" class="btn btn-primary me-3"> Sign up for free </button> <a class="btn btn-dark px-3" href="https://github.com/mdbootstrap/mdb-ui-kit" role="button" ><i class="fab fa-github"></i ></a> </div> </div> <!-- Collapsible wrapper --> </div> <!-- Container wrapper --> </nav> <!-- Navbar -->
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.
- HTML
<nav class="navbar navbar-light bg-light"> <div class="container-fluid"> <span class="navbar-text"> Navbar text with an inline element </span> </div> </nav>
Mix and match with other components and utilities as needed.
- HTML
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar w/ text</a> <button class="navbar-toggler" type="button" data-mdb-toggle="collapse" data-mdb-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation" > <i class="fas fa-bars"></i> </button> <div class="collapse navbar-collapse" id="navbarText"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <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="#">Features</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li> </ul> <span class="navbar-text"> Navbar text with an inline element </span> </div> </div> </nav>
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.
- HTML
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-fluid"> <ul class="navbar-nav"> <!-- Dropdown --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-mdb-toggle="dropdown" aria-expanded="false" > Dropdown link </a> <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <li> <a class="dropdown-item" href="#">Action</a> </li> <li> <a class="dropdown-item" href="#">Another action</a> </li> <li> <a class="dropdown-item" href="#">Something else here</a> </li> </ul> </li> </ul> </div> </nav>
Breadcrumb
Very common use case - breadcrumb in the navbar.
- HTML
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-fluid"> <nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"> <a href="#">Home</a> </li> <li class="breadcrumb-item"> <a href="#">Library</a> </li> <li class="breadcrumb-item active" aria-current="page"> <a href="#">Data</a> </li> </ol> </nav> </div> </nav>
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.
-
- Action
- Another action
- Something else here
- HTML
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-fluid"> <ul class="navbar-nav d-flex flex-row"> <!-- Icons --> <li class="nav-item me-3 me-lg-0"> <a class="nav-link" href="#"> <i class="fas fa-shopping-cart"></i> </a> </li> <li class="nav-item me-3 me-lg-0"> <a class="nav-link" href="#"> <i class="fab fa-twitter"></i> </a> </li> <!-- Icon dropdown --> <li class="nav-item me-3 me-lg-0 dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-mdb-toggle="dropdown" aria-expanded="false" > <i class="fas fa-user"></i> </a> <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> <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> </div> </nav>
Badges
Badges can be very useful for presenting counters, for example in the shopping cart.
- 1
- HTML
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-fluid"> <ul class="navbar-nav"> <!-- Badge --> <li class="nav-item"> <a class="nav-link" href="#"> <span class="badge badge-pill bg-danger">1</span> <span><i class="fas fa-shopping-cart"></i></span> </a> </li> </ul> </div> </nav>
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.
- 1
- Some news
- Another news
- Something else here
- HTML
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-fluid"> <ul class="navbar-nav"> <!-- Notification dropdown --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle hidden-arrow" href="#" id="navbarDropdownMenuLink" role="button" data-mdb-toggle="dropdown" aria-expanded="false" > <i class="fas fa-bell"></i> <span class="badge rounded-pill badge-notification bg-danger">1</span> </a> <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownMenuLink" > <li> <a class="dropdown-item" href="#">Some news</a> </li> <li> <a class="dropdown-item" href="#">Another news</a> </li> <li> <a class="dropdown-item" href="#">Something else here</a> </li> </ul> </li> <!-- Notification dropdown --> </ul> </div> </nav>
Flags
Use dropdown together with flags to create a language switch.
-
- English
- Polski
- 中文
- 日本語
- Deutsch
- Français
- Español
- Русский
- Português
- HTML
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-fluid"> <ul class="navbar-nav"> <!-- Icon dropdown --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-mdb-toggle="dropdown" aria-expanded="false" > <i class="united kingdom flag m-0"></i> </a> <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> <li> <a class="dropdown-item" href="#" ><i class="united kingdom flag"></i>English <i class="fa fa-check text-success ms-2"></i ></a> </li> <li><hr class="dropdown-divider" /></li> <li> <a class="dropdown-item" href="#"><i class="poland flag"></i>Polski</a> </li> <li> <a class="dropdown-item" href="#"><i class="china flag"></i>中文</a> </li> <li> <a class="dropdown-item" href="#"><i class="japan flag"></i>日本語</a> </li> <li> <a class="dropdown-item" href="#"><i class="germany flag"></i>Deutsch</a> </li> <li> <a class="dropdown-item" href="#"><i class="france flag"></i>Français</a> </li> <li> <a class="dropdown-item" href="#"><i class="spain flag"></i>Español</a> </li> <li> <a class="dropdown-item" href="#"><i class="russia flag"></i>Русский</a> </li> <li> <a class="dropdown-item" href="#"><i class="portugal flag"></i>Português</a> </li> </ul> </li> </ul> </div> </nav>
Avatar
By combining simple image and dropdown you can create an avatar with typical user options.
-
- My profile
- Settings
- Logout
- HTML
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-fluid"> <ul class="navbar-nav"> <!-- Avatar --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle d-flex align-items-center" href="#" id="navbarDropdownMenuLink" role="button" data-mdb-toggle="dropdown" aria-expanded="false" > <img src="https://mdbootstrap.com/img/Photos/Avatars/img (31).webp" class="rounded-circle" height="22" alt="" loading="lazy" /> </a> <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <li> <a class="dropdown-item" href="#">My profile</a> </li> <li> <a class="dropdown-item" href="#">Settings</a> </li> <li> <a class="dropdown-item" href="#">Logout</a> </li> </ul> </li> </ul> </div> </nav>
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.
- Home
- Link
- Dropdown
- Action
- Another action
- Something else here
- Disabled
- HTML
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <!-- Container wrapper --> <div class="container-fluid"> <!-- Toggle button --> <button class="navbar-toggler" type="button" data-mdb-toggle="collapse" data-mdb-target="#navbarLeftAlignExample" aria-controls="navbarLeftAlignExample" aria-expanded="false" aria-label="Toggle navigation" > <i class="fas fa-bars"></i> </button> <!-- Collapsible wrapper --> <div class="collapse navbar-collapse" id="navbarLeftAlignExample"> <!-- Left links --> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <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> <!-- Navbar dropdown --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-mdb-toggle="dropdown" aria-expanded="false" > Dropdown </a> <!-- Dropdown menu --> <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> <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> <li class="nav-item"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true" >Disabled</a > </li> </ul> <!-- Left links --> </div> <!-- Collapsible wrapper --> </div> <!-- Container wrapper --> </nav>
Right aligned
Add .ms-auto
class next to the .navbar-nav
to align the content to the right.
- Home
- Link
- Dropdown
- Action
- Another action
- Something else here
- Disabled
- HTML
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <!-- Container wrapper --> <div class="container-fluid"> <!-- Toggle button --> <button class="navbar-toggler" type="button" data-mdb-toggle="collapse" data-mdb-target="#navbarRightAlignExample" aria-controls="navbarRightAlignExample" aria-expanded="false" aria-label="Toggle navigation" > <i class="fas fa-bars"></i> </button> <!-- Collapsible wrapper --> <div class="collapse navbar-collapse" id="navbarRightAlignExample"> <!-- Left links --> <ul class="navbar-nav ms-auto mb-2 mb-lg-0"> <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> <!-- Navbar dropdown --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-mdb-toggle="dropdown" aria-expanded="false" > Dropdown </a> <!-- Dropdown menu --> <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> <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> <li class="nav-item"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true" >Disabled</a > </li> </ul> <!-- Left links --> </div> <!-- Collapsible wrapper --> </div> <!-- Container wrapper --> </nav>
Centered
Remove .ms-auto
or .me-auto
class and add .justify-content-center
next to the .navbar-collapse
to center the content.
- Home
- Link
- Dropdown
- Action
- Another action
- Something else here
- Disabled
- HTML
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <!-- Container wrapper --> <div class="container-fluid"> <!-- Toggle button --> <button class="navbar-toggler" type="button" data-mdb-toggle="collapse" data-mdb-target="#navbarCenteredExample" aria-controls="navbarCenteredExample" aria-expanded="false" aria-label="Toggle navigation" > <i class="fas fa-bars"></i> </button> <!-- Collapsible wrapper --> <div class="collapse navbar-collapse justify-content-center" id="navbarCenteredExample" > <!-- Left links --> <ul class="navbar-nav mb-2 mb-lg-0"> <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> <!-- Navbar dropdown --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-mdb-toggle="dropdown" aria-expanded="false" > Dropdown </a> <!-- Dropdown menu --> <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> <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> <li class="nav-item"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true" >Disabled</a > </li> </ul> <!-- Left links --> </div> <!-- Collapsible wrapper --> </div> <!-- Container wrapper --> </nav>
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.
Navbar
- Home
- Features
- Pricing
- About
Navbar
- Home
- Features
- Pricing
- About
Navbar
- Home
- Features
- Pricing
- About
- HTML
<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–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.
Navbar
- HTML
<div class="container"> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> </div> </nav> </div>
Use any of the responsive containers to change how wide the content in your navbar is presented.
Navbar
- HTML
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-md"> <a class="navbar-brand" href="#">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.
Also note that .sticky-top
uses position: sticky
, which isn’t fully supported in every browser.
Default
- HTML
<nav class="navbar navbar-light bg-light"> <div class="container-fluid"> <a class="navbar-brand" href="#">Default</a> </div> </nav>
Fixed top
- HTML
<nav class="navbar fixed-top navbar-light bg-light"> <div class="container-fluid"> <a class="navbar-brand" href="#">Fixed top</a> </div> </nav>
Fixed bottom
- HTML
<nav class="navbar fixed-bottom navbar-light bg-light"> <div class="container-fluid"> <a class="navbar-brand" href="#">Fixed bottom</a> </div> </nav>
Sticky top
- HTML
<nav class="navbar sticky-top navbar-light bg-light"> <div class="container-fluid"> <a class="navbar-brand" href="#">Sticky top</a> </div> </nav>
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:
Hidden brand
- Home
- Link
- Disabled
- HTML
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-fluid"> <button class="navbar-toggler" type="button" data-mdb-toggle="collapse" data-mdb-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation" > <i class="fas fa-bars"></i> </button> <div class="collapse navbar-collapse" id="navbarTogglerDemo01"> <a class="navbar-brand" href="#">Hidden brand</a> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <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"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true" >Disabled</a > </li> </ul> <form class="d-flex input-group w-auto"> <input type="search" class="form-control" placeholder="Type query" aria-label="Search" /> <button class="btn btn-outline-primary" type="button" data-mdb-ripple-color="dark" > Search </button> </form> </div> </div> </nav>
With a brand name shown on the left and toggler on the right:
Navbar
- Home
- Link
- Disabled
- HTML
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-mdb-toggle="collapse" data-mdb-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation" > <i class="fas fa-bars"></i> </button> <div class="collapse navbar-collapse" id="navbarTogglerDemo02"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <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"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true" >Disabled</a > </li> </ul> <form class="d-flex input-group w-auto"> <input type="search" class="form-control" placeholder="Type query" aria-label="Search" /> <button class="btn btn-outline-primary" type="button" data-mdb-ripple-color="dark" > Search </button> </form> </div> </div> </nav>
With a toggler on the left and brand name on the right:
Navbar
- Home
- Link
- Disabled
- HTML
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-fluid"> <button class="navbar-toggler" type="button" data-mdb-toggle="collapse" data-mdb-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation" > <i class="fas fa-bars"></i> </button> <a class="navbar-brand" href="#">Navbar</a> <div class="collapse navbar-collapse" id="navbarTogglerDemo03"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <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"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true" >Disabled</a > </li> </ul> <form class="d-flex input-group w-auto"> <input type="search" class="form-control" placeholder="Type query" aria-label="Search" /> <button class="btn btn-outline-primary" type="button" data-mdb-ripple-color="dark" > Search </button> </form> </div> </div> </nav>
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!
Collapsed content
Toggleable via the navbar brand.
- HTML
<div class="collapse" id="navbarToggleExternalContent"> <div class="bg-dark p-4"> <h5 class="text-white h4">Collapsed content</h5> <span class="text-muted">Toggleable via the navbar brand.</span> </div> </div> <nav class="navbar navbar-dark bg-dark"> <div class="container-fluid"> <button class="navbar-toggler" type="button" data-mdb-toggle="collapse" data-mdb-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation" > <i class="fas fa-bars"></i> </button> </div> </nav>
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.
- 1
- 2
- John
- 6
- Some news
- Another news
- Something else here
- 12
- Some news
- Another news
- Something else here
-
- Some news
- Another news
- Something else here
- HTML
<!-- Navbar--> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-fluid justify-content-between"> <!-- Left elements --> <div class="d-flex"> <!-- Brand --> <a class="navbar-brand me-2 mb-1 d-flex align-items-center" href="#"> <img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.webp" height="20" alt="" loading="lazy" style="margin-top: 2px;" /> </a> <!-- Search form --> <form class="input-group w-auto my-auto d-none d-sm-flex"> <input autocomplete="off" type="search" class="form-control rounded" placeholder="Search" style="min-width: 125px;" /> <span class="input-group-text border-0 d-none d-lg-flex" ><i class="fas fa-search"></i ></span> </form> </div> <!-- Left elements --> <!-- Center elements --> <ul class="navbar-nav flex-row d-none d-md-flex"> <li class="nav-item me-3 me-lg-1 active"> <a class="nav-link" href="#"> <span><i class="fas fa-home fa-lg"></i></span> <span class="badge rounded-pill badge-notification bg-danger">1</span> </a> </li> <li class="nav-item me-3 me-lg-1"> <a class="nav-link" href="#"> <span><i class="fas fa-flag fa-lg"></i></span> </a> </li> <li class="nav-item me-3 me-lg-1"> <a class="nav-link" href="#"> <span><i class="fas fa-video fa-lg"></i></span> </a> </li> <li class="nav-item me-3 me-lg-1"> <a class="nav-link" href="#"> <span><i class="fas fa-shopping-bag fa-lg"></i></span> </a> </li> <li class="nav-item me-3 me-lg-1"> <a class="nav-link" href="#"> <span><i class="fas fa-users fa-lg"></i></span> <span class="badge rounded-pill badge-notification bg-danger">2</span> </a> </li> </ul> <!-- Center elements --> <!-- Right elements --> <ul class="navbar-nav flex-row"> <li class="nav-item me-3 me-lg-1"> <a class="nav-link d-sm-flex align-items-sm-center" href="#"> <img src="https://mdbootstrap.com/img/new/avatars/1.webp" class="rounded-circle" height="22" alt="" loading="lazy" /> <strong class="d-none d-sm-block ms-1">John</strong> </a> </li> <li class="nav-item me-3 me-lg-1"> <a class="nav-link" href="#"> <span><i class="fas fa-plus-circle fa-lg"></i></span> </a> </li> <li class="nav-item dropdown me-3 me-lg-1"> <a class="nav-link dropdown-toggle hidden-arrow" href="#" id="navbarDropdownMenuLink" role="button" data-mdb-toggle="dropdown" aria-expanded="false" > <i class="fas fa-comments fa-lg"></i> <span class="badge rounded-pill badge-notification bg-danger">6</span> </a> <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownMenuLink" > <li> <a class="dropdown-item" href="#">Some news</a> </li> <li> <a class="dropdown-item" href="#">Another news</a> </li> <li> <a class="dropdown-item" href="#">Something else here</a> </li> </ul> </li> <li class="nav-item dropdown me-3 me-lg-1"> <a class="nav-link dropdown-toggle hidden-arrow" href="#" id="navbarDropdownMenuLink" role="button" data-mdb-toggle="dropdown" aria-expanded="false" > <i class="fas fa-bell fa-lg"></i> <span class="badge rounded-pill badge-notification bg-danger">12</span> </a> <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownMenuLink" > <li> <a class="dropdown-item" href="#">Some news</a> </li> <li> <a class="dropdown-item" href="#">Another news</a> </li> <li> <a class="dropdown-item" href="#">Something else here</a> </li> </ul> </li> <li class="nav-item dropdown me-3 me-lg-1"> <a class="nav-link dropdown-toggle hidden-arrow" href="#" id="navbarDropdownMenuLink" role="button" data-mdb-toggle="dropdown" aria-expanded="false" > <i class="fas fa-chevron-circle-down fa-lg"></i> </a> <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownMenuLink" > <li> <a class="dropdown-item" href="#">Some news</a> </li> <li> <a class="dropdown-item" href="#">Another news</a> </li> <li> <a class="dropdown-item" href="#">Something else here</a> </li> </ul> </li> </ul> <!-- Right elements --> </div> </nav> <!-- Navbar -->
If you want to support our friends from Tailwind Elements you can also check out the Tailwind navbar documentation.