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.



<!--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.



<!--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.



<!-- 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:



<!-- 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.


Rate this lesson

Previous lesson Live preview Next lesson

Spread the word:
Do you need help? Use our support forum

About the author

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

Install MDB CLI
It's the fastest way to create and host MDB projects
Free Download

Sign up to follow your progress and get additional benefits