Materializecss SideNav Example

Framework 1 :

Framework 2 :

+ Js file(s) :	//cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/js/materialize.min.js

+ Css file(s) :	//cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.min.css
	Apply

	Link :
Direct http link :
	Fork button :

Html code :
	Embed preview :
	Copy the following html code to your page to embed the preview, To include many previews on a single page, just repeat the first line. You can change the width, height and border color (bcolor).

<div class="refork-widget" code="4d0" style="width:100%;height:200px;" bcolor="#ccc"></div> <script type="text/javascript" src="//snippet.run/d/z.js"></script>

HTML

&lt;nav&gt;
  &lt;!-- === SideBar === --&gt;
  &lt;ul id="slide-out" class="side-nav"&gt;
    &lt;li&gt;&lt;a href="#!"&gt;First Sidebar Link&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#!"&gt;Second Sidebar Link&lt;/a&gt;&lt;/li&gt;
    &lt;li class="no-padding"&gt;
      &lt;ul class="collapsible collapsible-accordion"&gt;
        &lt;li&gt;
          &lt;a class="collapsible-header"&gt;More Options&lt;i class="mdi-navigation-arrow-drop-down"&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;div class="collapsible-body"&gt;
            &lt;ul&gt;
              &lt;li&gt;&lt;a href="#!"&gt;First option&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#!"&gt;Second option&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#!"&gt;Third option&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#!"&gt;Fourth option&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  &lt;!-- === NavBar === --&gt;
  &lt;ul class="left hide-on-med-and-down"&gt;
    &lt;li&gt;&lt;a href="#!"&gt;First Sidebar Link&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#!"&gt;Second Sidebar Link&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a class="dropdown-button" href="#!" data-activates="d1"&gt;More Options&lt;i class="mdi-navigation-arrow-drop-down right"&gt;&lt;/i&gt;&lt;/a&gt;
      &lt;ul id='d1' class='dropdown-content'&gt;
        &lt;li&gt;&lt;a href="#!"&gt;First option&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#!"&gt;Second option&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#!"&gt;Third option&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#!"&gt;Fourth option&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;!-- === NavBar Fixed Right Side === --&gt;
  &lt;ul class="right"&gt;
    &lt;li&gt;&lt;a class="dropdown-button" href="#!" data-activates="d2"&gt;My Account&lt;i class="mdi-navigation-arrow-drop-down right"&gt;&lt;/i&gt;&lt;/a&gt;
      &lt;ul id='d2' class='dropdown-content'&gt;
        &lt;li&gt;&lt;a href="#!"&gt;Profile&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#!"&gt;Log-Out&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  &lt;a href="#" data-activates="slide-out" class="button-collapse"&gt;&lt;i class="mdi-navigation-menu"&gt;&lt;/i&gt;&lt;/a&gt;
&lt;/nav&gt;

CSS

Javascript

Materializecss SideNav Example

Link :

Fork button :

Embed preview :