Introduction
This is a slide out menu. If you want a sidebar that will work on all widths, just add the class full
to your sidebar list. You can add a dropdown to your sidebar by using our collapsible component.
- First Sidebar Link
- Second Sidebar Link
-
-
Dropdown
-
Full HTML Structure
Add the class full
to have the sideNav openable on all screen sizes like the example above.
<ul id="slide-out" class="side-nav full">
<li><a href="#!">First Sidebar Link</a></li>
<li><a href="#!">Second Sidebar Link</a></li>
<li class="no-padding">
<ul class="collapsible collapsible-accordion">
<li>
<div class="collapsible-header">Dropdown<i class="mdi-navigation-arrow-drop-down"></i></div>
<div class="collapsible-body">
<ul>
<li><a href="#!">First Dropdown Link</a></li>
<li><a href="#!">Second Dropdown Link</a></li>
<li><a href="#!">Third Dropdown Link</a></li>
<li><a href="#!">Fourth Dropdown Link</a></li>
</ul>
</div>
</li>
</ul>
</li>
</ul>
<a href="#" data-activates="slide-out" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
Fixed HTML Structure
Add the class fixed
to have the sideNav be fixed and open on large screens and hides to the regular functionality on smaller screens. Our sideNav on the left is an example of this.
<ul id="slide-out" class="side-nav fixed">
<li><a href="#!">First Sidebar Link</a></li>
<li><a href="#!">Second Sidebar Link</a></li>
</ul>
<a href="#" data-activates="slide-out" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
Sidebar Alignment
Add the option right
to your initialization.
$(".button-collapse").sideNav({edge: 'right'});
jQuery Plugin Initialization
// Initialize collapse button
$(".button-collapse").sideNav();
// Initialize collapsible
$('.collapsible').collapsible();
Sass Variables
If you are using the Sass version you can specify the width in the variables.scss file.
$sidenav-width: 240px;