Hey there! This section was updated recently. If you're looking for 4.2.0 docs please visit this site

Bootstrap Navbar

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 plugin, it can easily integrate offscreen content.

MDB provides you with stylish Navbars, with distinctive for Material Design details (such as shadows, living colors or charming wave effects triggered by clicking on the link). Apart from traditional, text links, Bootstraps Navbar might embed regular & social icons, dropdowns, avatars or search forms.

Additional option, not available in native Bootstrap Navbar is possibility of implementing SideNav in a mobile version of Navbar


Examples:




Basics

Here’s what you need to know before getting started with the navbar:

  • Navbars require a wrapping .navbar with .navbar-toggleable-* for responsive collapsing and a color scheme.
  • To set the navbar color, you can use classes from our color palette.
  • 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 utility classes.
  • 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.

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 a full-height and lightweight navigation (including support for dropdowns)
  • .navbar-toggler for use with our collapse plugin and other navigation toggling behaviors.

Basic example


<!--Navbar-->
<nav class="navbar navbar-toggleable-md navbar-dark bg-primary">
    <div class="container">
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav1" aria-controls="navbarNav1" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand" href="#">
            <strong>Navbar</strong>
        </a>
        <div class="collapse navbar-collapse" id="navbarNav1">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link">Features</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link">Pricing</a>
                </li>
                <li class="nav-item dropdown btn-group">
                    <a class="nav-link dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
                    <div class="dropdown-menu dropdown" aria-labelledby="dropdownMenu1">
                        <a class="dropdown-item">Action</a>
                        <a class="dropdown-item">Another action</a>
                        <a class="dropdown-item">Something else here</a>
                    </div>
                </li>
            </ul>
            <form class="form-inline waves-effect waves-light">
                <input class="form-control" type="text" placeholder="Search">
            </form>
        </div>
    </div>
</nav>

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.





<!--/.Navbar red color-->                                
<nav class="navbar navbar-dark red">
...
</nav>
<!--/.Navbar red color-->

<!--/.Navbar green color-->                                
<nav class="navbar navbar-dark green">
...
</nav>
<!--/.Navbar green color-->

<!--/.Navbar teal color-->                                
<nav class="navbar navbar-light teal lighten-4">
...
</nav>
<!--/.Navbar teal color-->

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.


Live example 

<div class="container">
    <nav class="navbar navbar-dark bg-primary">
        <a class="navbar-brand" href="#">Navbar</a>
    </nav>
</div>

Live example 

<nav class="navbar navbar-dark bg-primary">
    <div class="container">
        <a class="navbar-brand" href="#">Navbar</a>
    </div>
</nav>

Placement

Navbars can be statically placed (their default behavior) or fixed to the top or bottom of the viewport.


Navbar Fixed Top:


Live example 

<nav class="navbar fixed-top navbar-light bg-faded">
  <a class="navbar-brand" href="#">Fixed top</a>
</nav>

Navbar Fixed Bottom:


Live example 

<nav class="navbar fixed-bottom navbar-light bg-faded">
  <a class="navbar-brand" href="#">Fixed bottom</a>
</nav>

Non-fixed Navbar on mobile

If you want keep your Navbar fixed only on large screens, add class .mobile-nofixed to the Navbar.

Scrolling navbar Premium component

By adding .scrolling-navbar class to your navbar, you can give it an animation on a scroll.

Live example 

<!--Navbar-->
<nav class="navbar fixed-top navbar-toggleable-md scrolling-navbar navbar-dark bg-primary">
    <div class="container">
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav1" aria-controls="navbarNav1" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand" href="#">
            <strong>Navbar</strong>
        </a>
        <div class="collapse navbar-collapse" id="navbarNav1">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link">Features</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link">Pricing</a>
                </li>
                <li class="nav-item btn-group dropdown">
                    <a class="nav-link dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
                        <a class="dropdown-item">Action</a>
                        <a class="dropdown-item">Another action</a>
                        <a class="dropdown-item">Something else here</a>
                    </div>
                </li>
            </ul>
            <form class="form-inline waves-effect waves-light">
                <input class="form-control" type="text" placeholder="Search">
            </form>
        </div>
    </div>
</nav>
<!--/.Navbar-->

Double navigation Premium component

MDB provides you multiple useful, ready-to-use page layouts with various predefined navigation types.

Click buttons below to learn more:

Predefined layouts Predefined skins

Collapsible content for mobile devices

Our collapse plugin allows you to use a <button> or <a> to toggle hidden content, what is especially useful for displaying on mobile devices.


You can do it in 2 ways:

1. By using classic Bootstrap collapsible content.

2. By using our material SideNav.


Classic Bootstrap collapsible content:


Resize your browser window to mobile size and click the menu icon.



<!--Navbar-->
<nav class="navbar navbar-toggleable-md navbar-dark bg-primary">
    <div class="container">
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#collapseEx12" aria-controls="collapseEx2" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand" href="#">MDBootstrap</a>
        <div class="collapse navbar-collapse" id="collapseEx12">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link">Features</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link">Pricing</a>
                </li>
                <li class="nav-item btn-group">
                    <a class="nav-link dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
                        <a class="dropdown-item">Action</a>
                        <a class="dropdown-item">Another action</a>
                        <a class="dropdown-item">Something else here</a>
                    </div>
                </li>
            </ul>
            <form class="form-inline waves-effect waves-light">
                <input class="form-control" type="text" placeholder="Search">
            </form>
        </div>
    </div>
</nav>
<!--/.Navbar-->

.toggleable or .toggleable-sm

If your Navbar contains multiple links and you don't want to wrap them in more than one line on smaller screens, use .toggleable-smclass instead of .toggleable.

That will hide your content on screens smaller than 768px and display it as a list when toggled.

Note: Remember to change class hidden-sm-up to hidden-md-up within Collapse Button to provide a proper behavior on medium screens.



Material SideNav Premium component


Click the button below and resize your browser window to the mobile size.

Live example

Initialization required

Before using our collapse plugin, you have to initialize it with the code below (unless you didn't do it before, for example by initializing SideNav - they share the same code).


Initialization code:


$(".button-collapse").sideNav();

Sample code:


<!--Navbar-->
<nav class="navbar navbar-dark bg-primary">
    <!--Collapse button-->
    <a href="#" data-activates="mobile-menu" class="button-collapse"><i class="fa fa-bars white-text"></i></a>

    <!--Content for large and medium screens-->
    <div class="navbar-desktop">
        <!--Navbar Brand-->
        <a class="navbar-brand" href="#">Navbar</a>
        <!--Links-->
        <ul class="nav navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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" href="#">About</a>
            </li>
        </ul>
        <!--Search form-->
        <form class="form-inline float-right">
            <input class="form-control" type="text" placeholder="Search">
        </form>
    </div>

    <!-- Content for mobile devices-->
    <div class="navbar-mobile">
        <ul class="side-nav" id="mobile-menu">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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" href="#">About</a>
            </li>
        </ul>
    </div>
</nav>
<!--/.Navbar-->