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:


Basic example


<navbar SideClass="navbar navbar-toggleable-md navbar-dark bg-primary">
    <logo><a class="logo navbar-brand" href="#">Navbar</a></logo>
    <links>
        <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" dropdown>
                <a dropdownToggle ripple-radius type="button" class="nav-link dropdown-toggle">
                Basic dropdown<span class="caret"></span></a>
                <div *dropdownMenu class="dropdown-menu dropdown dropdown-primary" role="menu">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <a class="dropdown-item" href="#">Something else here</a>
                    <div class="divider dropdown-divider"></div>
                    <a class="dropdown-item" href="#">Separated link</a>
                </div>
            </li>
        </ul>
        <form class="form-inline">
            <input class="form-control" type="text" placeholder="Search">
        </form>
    </links>
</navbar>

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-->                               
<navbar SideClass="navbar navbar-dark red">
...
</navbar>
<!--/.Navbar red color-->

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

<!--/.Navbar teal color-->                               
<navbar SideClass="navbar navbar-light teal lighten-4">
...
</navbar>
<!--/.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">                               
    <navbar SideClass="navbar-dark red">
        ...
    </navbar>
</div>

Placement

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


Navbar Fixed Top:


Live example 

<navbar SideClass="navbar navbar-toggleable-md navbar-dark bg-primary fixed-top">
    ...
 </navbar>

Navbar Fixed Bottom:


Live example 

<navbar SideClass="navbar navbar-toggleable-md navbar-dark bg-primary fixed-bottom">
    ...
</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 toggle hidden content, what is especially useful for displaying on mobile devices.



<navbar SideClass="navbar navbar-toggleable-md navbar-dark bg-primary">
    <logo><a class="logo navbar-brand" href="#">Navbar</a></logo>
    <links>
        <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" dropdown>
                <a dropdownToggle ripple-radius type="button" class="nav-link dropdown-toggle">
                Basic dropdown<span class="caret"></span></a>
                <div *dropdownMenu class="dropdown-menu dropdown dropdown-primary" role="menu">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <a class="dropdown-item" href="#">Something else here</a>
                    <div class="divider dropdown-divider"></div>
                    <a class="dropdown-item" href="#">Separated link</a>
                </div>
            </li>
        </ul>
        <form class="form-inline">
            <input class="form-control" type="text" placeholder="Search">
        </form>
    </links>
</navbar>