Navigation drawer usage

The navigation drawer has multiple options. Some of the options support a header item.

Permanent

The permanent navigation drawer is recommended for desktop. The permanent navigation drawer has three alternatives.

		
<nav id="drawer" class="drawer">
  <a href="#" class="drawer-dropdown">SMaterial <i class="material-icons">expand_more</i></a>
  <div class="dropdown">
    <a href="/">Introduction</a>
    <a href="/">Getting started</a>
    <a href="/">Elevation and shadows</a>
  </div>
</nav>
		
	

Full-height

In order to use the full height navigation you need to add the .drawer-permanent-full-height class to your .drawer.

		
<nav id="drawer" class="drawer drawer-permanent-full-height">
  <a href="#" class="drawer-dropdown">SMaterial <i class="material-icons">expand_more</i></a>
  <div class="dropdown">
    <a href="/">Introduction</a>
    <a href="/">Getting started</a>
    <a href="/">Elevation and shadows</a>
  </div>
</nav>
		
	

In addition you can use the .drawer-header class to an element. By using the header element the header also works. This method works for every navigation drawer type that supports a header.

		
<nav id="drawer" class="drawer drawer-permanent-full-height">
  <header class="drawer-header">
    <img src="/images/logo.svg" alt="SMalterial logo">
  </header>

  <a href="#" class="drawer-dropdown">SMaterial <i class="material-icons">expand_more</i></a>
  <div class="dropdown">
    <a href="/">Introduction</a>
    <a href="/">Getting started</a>
    <a href="/">Elevation and shadows</a>
  </div>
</nav>
		
	

Clipped

In order to use the clipped navigation you need to add the .drawer-permanent-clipped class to your .drawer.

The clipped navigation doesn't support a header.

		
<nav id="drawer" class="drawer drawer-permanent-clipped">
  <a href="#" class="drawer-dropdown">SMaterial <i class="material-icons">expand_more</i></a>
  <div class="dropdown">
    <a href="/">Introduction</a>
    <a href="/">Getting started</a>
    <a href="/">Elevation and shadows</a>
  </div>
</nav>
		
	

Floating

In order to use the floating navigation you need to add the .drawer-permanent-floating class to your .drawer.

The clipped navigation doesn't support a header.

		
<nav id="drawer" class="drawer drawer-permanent-floating">
  <a href="#" class="drawer-dropdown">SMaterial <i class="material-icons">expand_more</i></a>
  <div class="dropdown">
    <a href="/">Introduction</a>
    <a href="/">Getting started</a>
    <a href="/">Elevation and shadows</a>
  </div>
</nav>
		
	

Persistent

The persistent menu is recommended for all sizes larger than mobile. To use the persistent menu add the .drawer-persistent class to your .drawer.

In order to use the profile dropdown you have to use the menu styling as well.

		
<nav id="drawer" class="drawer drawer-persistent">
  <header class="drawer-header">
    <img src="/images/profile-icon.jpg" alt="SMaterial profile example" class="drawer-profile-img">
    <div class="drawer-profile-name">John</div>
    <div id="drawer-profile-more" class="drawer-profile-more">
      <i class="material-icons trigger" data-trigger="profile">arrow_drop_down</i>

      <nav class="menu" id="profile">
        <a href="#">Facebook</a>
        <a href="#">Google Plus</a>
        <a href="#">Add account</a>
      </nav>
    </div>
    <div><i class="material-icons arrow trigger" data-trigger="drawer">chevron_left</i></div>
  </header>

  <a href="#" class="drawer-dropdown">SMaterial <i class="material-icons">expand_more</i></a>
  <div class="dropdown">
    <a href="/">Introduction</a>
    <a href="/">Getting started</a>
    <a href="/">Elevation and shadows</a>
  </div>
</nav>
		
	

Temporary

To use the temporary menu add the .drawer-temporary class to your .drawer.

The temporary menu has the most options for the header. The .scrum class can be added for background images that are light. In order to use the profile dropdown you have to use the menu styling as well.

		
<nav id="drawer" class="drawer drawer-temporary">
  <header class="drawer-header">
    <img src="/images/drawer-background.jpg" class="drawer-profile-background">
      <div class="scrim"></div>
      <img src="/images/profile-icon.jpg" class="drawer-profile-img">
      <div class="drawer-profile-name">John Doe</div>
      <div class="drawer-profile-email">johndoe@gmail.com</div>
      <div class="drawer-profile-more">
        <i class="material-icons trigger" data-trigger="profile">arrow_drop_down</i>

         <nav class="menu" id="profile">
           <a href="#">Facebook</a>
           <a href="#">Google Plus</a>
           <a href="#">Add account</a>
         </nav>
      </div>
  </header>

  <a href="#" class="drawer-dropdown">SMaterial <i class="material-icons">expand_more</i></a>
  <div class="dropdown">
    <a href="/">Introduction</a>
    <a href="/">Getting started</a>
    <a href="/">Elevation and shadows</a>
  </div>
</nav>
		
	

Resources