Side Navigation Bar By Using Materialize Framework

This is a slide out menu. 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. To use this in conjunction with a fullscreen navigation, you have to use two copies of the same UL.


For Demo & Free Source Code Scroll down.

The Materialize navbar is created by HTML 5 code nav tag with container (recommended div) with nav-wrapper class. For creating responsive navbar with hamburger icon, you may use the built-in class button-collapse for that. The navbar may contain buttons, search box, and links/logo can be aligned left or right easily.


Name Type Default Description
edge String 'left' Side of screen on which Sidenav appears.
draggable Boolean true Allow swipe gestures to open/close Sidenav.
inDuration Number 250 Length in ms of enter transition.
outDuration Number 200 Length in ms of exit transition.
onOpenStart Function null Function called when sidenav starts entering.
onOpenEnd Function null Function called when sidenav finishes entering.
onCloseStart Function null Function called when sidenav starts exiting.
onCloseEnd Function null Function called when sidenav finishes exiting.
preventScrolling Boolean true Prevent page from scrolling while sidenav is open.

For working example, You will get all files, when you download the source code. And after than you can edit it according to you

if you face any issues you can contact by asking question on Developers Community

You can go through Demo as well as Download source code for the same & make changes according to you

Do You have Ready Project?

Share It With Others. Submit Your Project & get Featured On Our Website.



More Great Articles