Materialize CSS Sidenav
Materialize CSS sidenav or Materialize CSS sidebar 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 a Materialize sidenav navigation:
-
Assign the
.sidenavto the unordered list container i.e<ul>element base class and make sureidattribute consists of unique value.Unordered List
<ul id="slide-out" class="sidenav"> </ul> -
At the end, assign the unordered list
idattribute value to the link's or button'sdata-attributevalue and assign the.sidenav-triggerclass to the link or button element base class.Sidenav Trigger Button
<a href="#" data-target="slide-out" class="sidenav-trigger btn">Click Here</a> -
At the end, initialize the sidenav using Javascript or jQuery.
Sidenav Initialization
document.addEventListener('DOMContentLoaded', function() { var elems = document.querySelectorAll('.sidenav'); var instances = M.Sidenav.init(elems, options); }); // Or with jQuery $(document).ready(function(){ $('.sidenav').sidenav(); });
General Syntax
<ul id="slide-out" class="sidenav"> </ul>
<a href="#" data-target="slide-out" class="sidenav-trigger btn">Click Here</a>
Source Code
<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>
Please keep in mind that the sidenav HTML should not be contained within the Materialize navbar HTML.
Fixed HTML Structure
Add the .sidenav-fixed class to the sidenav. It opens on large screens and hides the regular functionality on the smaller screens.
General Syntax
<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>
Fullscreen HTML Structure
To access sidebar menu on all the screensizes, you have to add the .show-on-large class to the .sidenav-trigger.
General Syntax
<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>
Materialize Sidenav Right
By default sidenav opens from the left side of the web page and edge property has default value left.
If you want to appear sidebar from the right side of the web page, then assigned edge property value to
right..
Right Sidenav Initialization
// jQuery Initialization For Right Sidenav
$(document).ready(function(){
$('.sidenav').sidenav({
edge:'right'
});
});
Source Code
<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">Ashok Dev</span></a>
<a href="#email"><span class="white-text email">ashokdev@gmail.com</span></a>
</div>
</li>
<li><a href="#!">API</a></li>
<li><a href="#!">Android App</a></li>
<li><div class="divider"></div></li>
<li><a class="subheader">ios 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">Right Sidebar</a>
Conclusion
Materialize CSS sidenav is a slide out menu that opens either from the left side or from the right side of the web page. To open the side nav menu on the large screen only, use sidenav-fixed class.
If you want to acess sidebar on the all screen size then use .show-on-large class.
Please keep in mind that the sidenav HTML should not be contained within the Materialize navbar HTML.
Web Tutorials
