Materialize CSS Sidenav is a slide out menu. Although, dropdown menu can be added inside the sidebar using collapsible component of Materialize CSS easily.
Basic steps to create sidenav:
.sidenav
to the unordered list container i.e <ul>
element base class and make sure id
attribute consists of unique value.
<ul id="slide-out" class="sidenav"> </ul>
id
attribute value to the link's or button's data-attribute
value and assign the .sidenav-trigger
class to the link or button element base class.
<a href="#" data-target="slide-out" class="sidenav-trigger btn">Click Here</a>
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.sidenav');
var instances = M.Sidenav.init(elems, options);
});
// Or with jQuery
$(document).ready(function(){
$('.sidenav').sidenav();
});
<ul id="slide-out" class="sidenav"> </ul>
<a href="#" data-target="slide-out" class="sidenav-trigger btn">Click Here</a>
<ul id="slide-out" class="sidenav">
<li>
<div class="user-view">
<div class="background">
<img src="https://picsum.photos/300/300" />
</div>
<a href="#user"><img class="circle" src="../code-support/images/person-chip.jpg" /></a>
<a href="#name"><span class="white-text name">John Doe</span></a>
<a href="#email"><span class="white-text email">johndoe@gmail.com</span></a>
</div>
</li>
<li><a href="#!">Learn Web development</a></li>
<li><a href="#!">Learn Graphics Designing</a></li>
<li><div class="divider"></div></li>
<li><a class="subheader">Mobile App </a></li>
<li><a class="waves-effect" href="#!">Mobile App design & Development</a></li>
</ul>
<a href="#" data-target="slide-out" class="sidenav-trigger btn">Click To See The Sidebar Menu</a>
Add the .sidenav-fixed
class to the sidenav. It opens on large screens and hides the regular functionality on the smaller screens.
<ul id="slide-out" class="sidenav sidenav-fixed"></ul>
<a href="#" data-target="slide-out" class="sidenav-trigger">
<i class="material-icons">menu</i>
</a>
To access sidebar menu on all the screensizes, you jave to add the .show-on-large
class to the .sidenav-trigger
.
<ul id="slide-out" class="sidenav"> </ul>
<a href="#" data-target="slide-out" class="sidenav-trigger show-on-large" >
<i class="material-icons">menu</i>
</a>