Navigation and slide-out button

Step 1 - Slide-out button

We'll now remove the entire content of the navbar. We don't need it because we'll recreate it from scratch.

HTML



<!--Navbar-->
<nav class="navbar navbar-expand-lg navbar-dark primary-color double-nav">



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

Now let's add a new slide-out button to trigger the SideNav.

HTML



<!--Navbar-->
<nav class="navbar navbar-expand-lg navbar-dark primary-color double-nav">

  <!-- SideNav slide-out button -->
  <div class="float-left">
      <a href="#" data-activates="slide-out" class="button-collapse">
          <i class="fas fa-bars"></i>
      </a>
  </div>

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

Save the file, refresh the browser and resize the browser window to the size of a mobile device. When you click on the hamburger icon you will notice it now works perfectly with the SideNav.

Step 2 - Breadcrumbs

Now we'll add breadcrumbs.

Paste this code below the slide-out button.

HTML



<!-- Breadcrumb-->
<div class="breadcrumb-dn mr-auto">
    <p>Material Design for Bootstrap</p>
</div>

PS: If you would like to learn more about Breadcrumbs have a look at our Breadcrumbs documentation.

Step 3 - Links

The last elements we'll add to the navbar are links. Place this code below breadcrumbs:

HTML



<!-- Links -->
<ul class="nav navbar-nav nav-flex-icons ml-auto">
    <li class="nav-item">
        <a class="nav-link">
            <i class="fas fa-envelope"></i>
            <span class="clearfix d-none d-sm-inline-block">Contact</span>
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link">
            <i class="fas fa-cog"></i>
            <span class="clearfix d-none d-sm-inline-block">Settings</span>
        </a>
    </li>
    <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <i class="fas fa-user"></i>
            <span class="clearfix d-none d-sm-inline-block">Account</span>
        </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>
</ul>

PS: To learn more about Navbars and Dropdowns take a look at their documentation to see different variations and options of these components.

PS 2: To learn more about different navigation variations take a look at our Navigation layouts documentation.

Previous lesson Live preview Next lesson

Spread the word:

Do you need help? Use our support forum

About the author

Michal Szymanski

Co-Founder at MDBootstrap & BrandFlow. Entrepreneur, web developer, UI/UX designer, marketing analyst. Dancer and nerd in one.