Admin dashboard – lesson 2


Step 1 - Slide-out button

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


<!--Navbar-->
<nav class="navbar navbar-expand-lg navbar-dark indigo 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 indigo double-nav">

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

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

Step 2 - Breadcrumbs

Now we'll add breadcrumbs.

Paste this code below 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 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="fa 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="fa fa-gear"></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="fa 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 documentation to see different variations and options of these components.

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


Previous lesson Download 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, UI/UX designer, marketing analyst. Dancer & nerd.