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. If you want to see a demo, our sidebar will use this on smaller screens.
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>
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>
Add the option right
to your initialization.
$(".button-collapse").sideNav({edge: 'right'});
// Initialize collapse button
$(".button-collapse").sideNav();
// Initialize collapsible
$('.collapsible').collapsible();
We have methods to show and hide your sidebar you can use to programmatically control your sidebar.
// Show sideNav
$('.button-collapse').sideNav('show');
// Hide sideNav
$('.button-collapse').sideNav('hide');
If you are using the Sass version you can specify the width in the variables.scss file.
$sidenav-width: 240px;