The navbar is fully contained by an HTML5 Nav tag. Inside a recommended container div, there are 2 main parts of the navbar. A logo or brand link, and the navigations links. You can align these links to the left or right.
Right Aligned Links
To right align your navbar links, just add a right
class to your <ul>
that contains them.
<nav>
<div class="nav-wrapper">
<a href="#" class="brand-logo">Logo</a>
<ul id="nav-mobile" class="right side-nav">
<li><a href="sass.html">Sass</a></li>
<li><a href="components.html">Components</a></li>
<li><a href="javascript.html">JavaScript</a></li>
</ul>
</div>
</nav>
Left Aligned Links
To left align your navbar links, just add a left
class to your <ul>
that contains them.
<nav>
<div class="nav-wrapper">
<a href="#" class="brand-logo right">Logo</a>
<ul id="nav-mobile" class="left side-nav">
<li><a href="sass.html">Sass</a></li>
<li><a href="components.html">Components</a></li>
<li><a href="javascript.html">JavaScript</a></li>
</ul>
</div>
</nav>
Icon Links
You can add icons into links. For icon only links you don't need any additional class. Just pop the i
tag in and it will work.
<nav>
<div class="nav-wrapper">
<div class="col s12">
<a href="#!" class="brand-logo">Logo</a>
<ul class="side-nav">
<li><a href="sass.html"><i class="mdi-action-search"></i></a></li>
<li><a href="components.html"><i class="mdi-action-view-module"></i></a></li>
<li><a href="javascript.html"><i class="mdi-navigation-refresh"></i></a></li>
<li><a href="mobile.html"><i class="mdi-navigation-more-vert"></i></a></li>
</ul>
</div>
</div>
</nav>
For adding an icon to a text link you need to add either a left
or right
class to the icon depending on where you want the icon to be.
<nav>
<div class="nav-wrapper">
<div class="col s12">
<a href="#!" class="brand-logo">Logo</a>
<ul class="side-nav">
<li><a href="sass.html"><i class="mdi-action-search left"></i>Link with Left Icon</a></li>
<li><a href="components.html"><i class="mdi-action-view-module right"></i>Link with Right Icon</a></li>
</ul>
</div>
</div>
</nav>
Search Bar
You can add a search form in the navbar.
<nav>
<div class="nav-wrapper">
<form>
<div class="input-field col s12">
<input id="search" type="text" required>
<label for="search"><i class="mdi-action-search"></i></label>
</div>
</form>
</div>
</nav>
Mobile Collapse Button
When your nav bar is resized, you will see that the links on the right turn into a hamburger icon . Take a look at the example below to get this functionality. Add the entire button-collapse
line to your nav
.
<nav>
<div class="nav-wrapper">
<a href="#" class="brand-logo">Logo</a>
<ul id="nav-mobile" class="right side-nav">
<li><a href="sass.html">Sass</a></li>
<li><a href="components.html">Components</a></li>
<li><a href="javascript.html">JavaScript</a></li>
</ul>
<!-- Include this line below -->
<a class="button-collapse" href="#" data-activates="nav-mobile"><i class="mdi-navigation-menu"></i></a>
<!-- End -->
</div>
</nav>
Initialization
After including the button-collapse line into your navbar, all you have to do now is place this code in your page's $( document ).ready(function(){})
code. This example below assumes you have not modified the classes in the above example. In the case that you have, just change the jQuery selector in the line below to match it.
$(".button-collapse").sideNav();