Author: Michal Szymanski
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.
Previous lesson Live preview Next lesson
Spread the word:
