Navbar

eCommerce navbar

Navbar component designed for eCommerce projects.


Basic example



        <!-- Navbar -->
        <nav class="navbar navbar-expand-md navbar-light">

          <a class="navbar-brand" href="#!">
            <img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" height="30" alt="mdb logo">
          </a>

          <!-- Collapse button -->
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav1"
            aria-controls="basicExampleNav1" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>

          <!-- Breadcrumbs -->
          <ol class="breadcrumb">
            <li class="breadcrumb-item"><a class="waves-effect" href="#!">Home</a></li>
            <li class="breadcrumb-item"><a class="waves-effect" href="#!">Templates</a></li>
            <li class="breadcrumb-item active"><a class="waves-effect" href="#!">E-commerce</a></li>
          </ol>
          <!-- Breadcrumbs -->

          <!-- Links -->
          <div class="collapse navbar-collapse" id="basicExampleNav1">

            <!-- Right -->
            <ul class="navbar-nav ml-auto">
              <li class="nav-item">
                <a href="#!" class="nav-link navbar-link-2 waves-effect">
                  <span class="badge badge-pill red">1</span>
                  <i class="fas fa-shopping-cart pl-0"></i>
                </a>
              </li>
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle waves-effect" id="navbarDropdownMenuLink3" data-toggle="dropdown"
                  aria-haspopup="true" aria-expanded="true">
                  <i class="united kingdom flag m-0"></i>
                </a>
                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
                  <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>
              </li>
              <li class="nav-item">
                <a href="#!" class="nav-link waves-effect">
                  Shop
                </a>
              </li>
              <li class="nav-item">
                <a href="#!" class="nav-link waves-effect">
                  Contact
                </a>
              </li>
              <li class="nav-item">
                <a href="#!" class="nav-link waves-effect">
                  Sign in
                </a>
              </li>
              <li class="nav-item pl-2 mb-2 mb-md-0">
                <a href="#!" type="button"
                  class="btn btn-outline-info btn-md btn-rounded btn-navbar waves-effect waves-light">Sign up</a>
              </li>
            </ul>

          </div>
          <!-- Links -->

        </nav>
        <!-- Navbar -->

      

Supported content

Brand



          <!-- Navbar -->
          <nav class="navbar navbar-expand-md navbar-light">

            <!-- Collapse button -->
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav2"
              aria-controls="basicExampleNav2" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>

            <a class="navbar-brand" href="#!">
              <img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" height="30" alt="mdb logo">
            </a>

          </nav>
          <!-- Navbar -->

        

Icons



          <!-- Navbar -->
          <nav class="navbar navbar-expand-md navbar-light">

            <!-- Collapse button -->
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav5"
              aria-controls="basicExampleNav5" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>

            <!-- Links -->
            <div class="collapse navbar-collapse" id="basicExampleNav5">

              <!-- Right -->
              <ul class="navbar-nav ml-auto nav-flex-icons">
                <li class="nav-item">
                  <a class="nav-link waves-effect waves-light">
                    <i class="fab fa-twitter"></i>
                  </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link waves-effect waves-light">
                    <i class="fab fa-google-plus-g"></i>
                  </a>
                </li>
                <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink-333" data-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="false">
                    <i class="fas fa-user"></i>
                  </a>
                  <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink-333">
                    <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>
                </li>
              </ul>

            </div>
            <!-- Links -->

          </nav>
          <!-- Navbar -->


        

Badges



          <!-- Navbar -->
          <nav class="navbar navbar-expand-md navbar-light">

            <!-- Collapse button -->
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav6"
              aria-controls="basicExampleNav6" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>

            <!-- Links -->
            <div class="collapse navbar-collapse" id="basicExampleNav6">

              <!-- Right -->
              <ul class="navbar-nav nav-flex-icons ml-auto">
                <li class="nav-item dropdown notifications-nav pr-md-3">
                  <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink151" data-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="true">
                    <span class="badge badge-pill bg-danger">1</span>
                    <span><i class="fas fa-bell"></i></span>
                  </a>
                  <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink151">
                    <a class="dropdown-item" href="#!">
                      <i class="far fa-money-bill-alt mr-2" aria-hidden="true"></i>
                      <span>New order received</span>
                      <span class="float-right"><i class="far fa-clock" aria-hidden="true"></i> 13 min</span>
                    </a>
                    <a class="dropdown-item" href="#!">
                      <i class="far fa-money-bill-alt mr-2" aria-hidden="true"></i>
                      <span>New order received</span>
                      <span class="float-right"><i class="far fa-clock" aria-hidden="true"></i> 33 min</span>
                    </a>
                    <a class="dropdown-item" href="#!">
                      <i class="fas fa-chart-line mr-2" aria-hidden="true"></i>
                      <span>Your campaign is about end</span>
                      <span class="float-right"><i class="far fa-clock" aria-hidden="true"></i> 53 min</span>
                    </a>
                  </div>
                </li>
                <li class="nav-item">
                  <a class="nav-link ">
                    <span class="badge badge-pill bg-danger">1</span>
                    <span><i class="fas fa-envelope"></i></span>
                  </a>
                </li>
              </ul>

            </div>
            <!-- Links -->

          </nav>
          <!-- Navbar -->

        

Avatar



          <!-- Navbar -->
          <nav class="navbar navbar-expand-md navbar-light">

            <!-- Collapse button -->
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav7"
              aria-controls="basicExampleNav7" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>

            <!-- Links -->
            <div class="collapse navbar-collapse" id="basicExampleNav7">

              <!-- Right -->
              <ul class="navbar-nav nav-flex-icons ml-auto">
                <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink-55" data-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="false">
                    <img src="https://mdbootstrap.com/img/Photos/Avatars/img (31).jpg" class="rounded-circle"
                      style="height: 34px;" alt="avatar image">
                  </a>
                  <div class="dropdown-menu dropdown-menu-lg-right" aria-labelledby="navbarDropdownMenuLink-55">
                    <a class="dropdown-item" href="#!">Logout</a>
                    <a class="dropdown-item" href="#!">Settings</a>
                    <a class="dropdown-item" href="#!">Profile</a>
                  </div>
                </li>
              </ul>

            </div>
            <!-- Links -->

          </nav>
          <!-- Navbar -->

        

Buttons



          <!-- Navbar -->
          <nav class="navbar navbar-expand-md navbar-light">

            <!-- Collapse button -->
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav8"
              aria-controls="basicExampleNav8" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>

            <!-- Links -->
            <div class="collapse navbar-collapse" id="basicExampleNav8">

              <!-- Right -->
              <ul class="navbar-nav ml-auto">
                <li class="nav-item pl-2 mb-2 mb-md-0">
                  <a href="#!" type="button"
                    class="btn btn-outline-primary btn-md btn-rounded btn-navbar waves-effect waves-light">Sign in</a>
                </li>
                <li class="nav-item pl-2 mb-2 mb-md-0">
                  <a href="#!" type="button"
                    class="btn btn-outline-info btn-md btn-rounded btn-navbar waves-effect waves-light">Sign up</a>
                </li>
              </ul>

            </div>
            <!-- Links -->

          </nav>
          <!-- Navbar -->

        


Color schemes

White



          <!-- Navbar -->
          <nav class="navbar navbar-expand-md navbar-light">

            <a class="navbar-brand" href="#!">
              <img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" height="30" alt="mdb logo">
            </a>

            <!-- Collapse button -->
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav11"
              aria-controls="basicExampleNav11" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>

            <!-- Breadcrumbs -->
            <ol class="breadcrumb">
              <li class="breadcrumb-item"><a class="waves-effect" href="#!">Home</a></li>
              <li class="breadcrumb-item"><a class="waves-effect" href="#!">Templates</a></li>
              <li class="breadcrumb-item active"><a class="waves-effect" href="#!">E-commerce</a></li>
            </ol>
            <!-- Breadcrumbs -->

            <!-- Links -->
            <div class="collapse navbar-collapse" id="basicExampleNav11">

              <!-- Right -->
              <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                  <a href="#!" class="nav-link navbar-link-2 waves-effect">
                    <span class="badge badge-pill red">1</span>
                    <i class="fas fa-shopping-cart pl-0"></i>
                  </a>
                </li>
                <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle waves-effect" id="navbarDropdownMenuLink3" data-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="true">
                    <i class="united kingdom flag m-0"></i>
                  </a>
                  <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
                    <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>
                </li>
                <li class="nav-item">
                  <a href="#!" class="nav-link waves-effect">
                    Shop
                  </a>
                </li>
                <li class="nav-item">
                  <a href="#!" class="nav-link waves-effect">
                    Contact
                  </a>
                </li>
                <li class="nav-item">
                  <a href="#!" class="nav-link waves-effect">
                    Sign in
                  </a>
                </li>
                <li class="nav-item pl-2 mb-2 mb-md-0">
                  <a href="#!" type="button"
                    class="btn btn-outline-info btn-md btn-rounded btn-navbar waves-effect waves-light">Sign up</a>
                </li>
              </ul>

            </div>
            <!-- Links -->

          </nav>
          <!-- Navbar -->

        

Transparent

Live Demo


          <!-- Navbar -->
          <nav class="navbar navbar-expand-md navbar-light fixed-top scrolling-navbar navbar-transparent">

            ...

          </nav>
          <!-- Navbar -->

        

Containers

Although it’s not required, you can wrap a navbar in a .container to center it on a page or add one within it to only center the contents of a fixed or static top navbar

Live demo


        <div class="container">

          <!-- Navbar -->
          <nav class="navbar navbar-expand-md navbar-light">

            <a class="navbar-brand" href="#!">
              <img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" height="30" alt="mdb logo">
            </a>

          </nav>
          <!-- Navbar -->

        </div>

      

When the container is within your navbar, its horizontal padding is removed at breakpoints lower than your specified .navbar-expand{-sm|-md|-lg|-xl} class. This ensures we’re not doubling up on padding unnecessarily on lower viewports when your navbar is collapsed.

Live demo


        <!-- Navbar -->
        <nav class="navbar navbar-expand-md navbar-light">

          <div class="container">

            <a class="navbar-brand" href="#!">
              <img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" height="30" alt="mdb logo">
            </a>

          </div>

        </nav>
        <!-- Navbar -->

      
Live demo


        <!-- Navbar -->
        <nav class="navbar navbar-expand-md navbar-light">

          <div class="container-fluid">

            <a class="navbar-brand" href="#!">
              <img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" height="30" alt="mdb logo">
            </a>

          </div>

        </nav>
        <!-- Navbar -->

      

Centering the content



        <!-- Navbar -->
        <nav class="navbar navbar-expand-md navbar-light">

          <!-- Collapse button -->
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav17"
            aria-controls="basicExampleNav17" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>

          <!-- Links -->
          <div class="collapse navbar-collapse justify-content-center" id="basicExampleNav17">

            <!-- Right -->
            <ul class="navbar-nav">
              <li class="nav-item">
                <a href="#!" class="nav-link navbar-link-2 waves-effect">
                  <span class="badge badge-pill red">1</span>
                  <i class="fas fa-shopping-cart pl-0"></i>
                </a>
              </li>
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle waves-effect" id="navbarDropdownMenuLink3" data-toggle="dropdown"
                  aria-haspopup="true" aria-expanded="true">
                  <i class="united kingdom flag m-0"></i>
                </a>
                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
                  <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>
              </li>
              <li class="nav-item">
                <a href="#!" class="nav-link waves-effect">
                  Shop
                </a>
              </li>
              <li class="nav-item">
                <a href="#!" class="nav-link waves-effect">
                  Contact
                </a>
              </li>
              <li class="nav-item">
                <a href="#!" class="nav-link waves-effect">
                  Sign in
                </a>
              </li>
              <li class="nav-item pl-2 mb-2 mb-md-0">
                <a href="#!" type="button"
                  class="btn btn-outline-info btn-md btn-rounded btn-navbar waves-effect waves-light">Sign up</a>
              </li>
            </ul>

          </div>
          <!-- Links -->

        </nav>
        <!-- Navbar -->

      

Many content elements



        <!-- Navbar -->
        <nav class="navbar navbar-expand-md navbar-light">

          <a class="navbar-brand" href="#!">
            <img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" height="30" alt="mdb logo">
          </a>

          <!-- Collapse button -->
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav13"
            aria-controls="basicExampleNav13" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>

          <!-- Breadcrumbs -->
          <ol class="breadcrumb d-none d-xl-flex">
            <li class="breadcrumb-item"><a class="waves-effect" href="#!">Home</a></li>
            <li class="breadcrumb-item"><a class="waves-effect" href="#!">Templates</a></li>
            <li class="breadcrumb-item active">E-commerce</li>
          </ol>
          <!-- Breadcrumbs -->

          <!-- Links -->
          <div class="collapse navbar-collapse" id="basicExampleNav13">

            <form class="navbar-search pl-0 ml-auto mt-3 mb-2 mt-md-0 mb-md-0 mr-3" action="">
              <div class="input-group d-block d-md-flex mb-0">
                <div class="input-group-prepend">
                  <a href="#!" class="input-icon d-flex align-items-center" type="button"><i
                      class="fas fa-search text-white mx-3"></i></a>
                  <input class="form-control white-text rgba-black-light border-0 z-depth-0 pl-5" type="text"
                    placeholder="Search" aria-label="Search">
                </div>
              </div>
            </form>

            <!-- Right -->
            <ul class="navbar-nav">
              <li class="nav-item">
                <a href="#!" class="nav-link navbar-link-2 waves-effect">
                  <span class="badge badge-pill red">1</span>
                  <i class="fas fa-shopping-cart pl-0"></i>
                </a>
              </li>
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle waves-effect" id="navbarDropdownMenuLink3" data-toggle="dropdown"
                  aria-haspopup="true" aria-expanded="true">
                  <i class="united kingdom flag m-0"></i>
                </a>
                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
                  <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>
              </li>
              <li class="nav-item">
                <a href="#!" class="nav-link waves-effect">
                  Shop
                </a>
              </li>
              <li class="nav-item">
                <a href="#!" class="nav-link waves-effect">
                  Contact
                </a>
              </li>
              <li class="nav-item d-md-none d-xl-inline-block">
                <a href="#!" class="nav-link waves-effect">
                  Sign in
                </a>
              </li>
              <li class="nav-item pl-2 mb-2 mb-md-0 d-md-none d-xl-inline-block">
                <a href="#!" type="button"
                  class="btn btn-outline-info btn-md btn-rounded btn-navbar waves-effect waves-light">Sign
                  up</a>
              </li>
            </ul>

          </div>
          <!-- Links -->

        </nav>
        <!-- Navbar -->

      

Placement

Use our position utilities to place navbars in non-static positions. Choose from fixed to the top, fixed to the bottom, or stuck 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



        <nav class="navbar navbar-light">
          <a class="navbar-brand" href="#!">Default</a>
        </nav>

      

Fixed top

Live demo


        <nav class="navbar navbar-expand-md navbar-light fixed-top">
          <a class="navbar-brand" href="#!">Fixed top</a>
        </nav>

      

Fixed bottom

Live demo


        <nav class="navbar navbar-expand-md navbar-light fixed-bottom">
          <a class="navbar-brand" href="#!">Fixed bottom</a>
        </nav>

      

Sticky top

Live demo


        <nav class="navbar navbar-expand-md navbar-light sticky-top">
          <a class="navbar-brand" href="#!">Sticky top</a>
        </nav>