Preview

Installation

To import just the component styles, copy the following into your project’s styles.css file:

/* Core Styles */
@import url('https://kherrick.github.io/material-design-lite/css/core.css');
/* Material Icons */
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
/* Roboto Font */
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap');
/* Component Styles */
@import url('https://kherrick.github.io/material-design-lite/css/components/navigation-icon/style.css');
@import url('https://kherrick.github.io/material-design-lite/css/components/navigation-rail/style.css');

Usage

Start with a aside or div element and add the navigation-rail class name:

<div class="navigation-rail"></div>

Navigation Icons

A navigation rail needs a minimum of 2 destinations. Each destination is represented by a label element with a for attribute that matches the id of an input element. The input element is hidden and is used to control the state of the navigation rail.

All the navigation icons in a navigation rail should be wrapped in a nav element or div with navigation-rail-destinations class name.

<div class="list">
  <aside class="navigation-rail">
    <nav>
      <input type="radio" name="nav-rail-2" value="tab-1" id="tab-1" checked/>
      <label class="navigation-icon" for="tab-1">
        <i class="material-icons">info</i>
        <span>Tab 1</span>
      </label>
      <input type="radio" name="nav-rail-2" value="tab-2" id="tab-2" />
      <label class="navigation-icon" for="tab-2">
        <i class="material-icons">info</i>
        <span>Tab 2</span>
      </label>
    </nav>
  </aside>
</div>

It is recommended to set the checked attribute on the default tab.

Floating Action Button

A floating action button can be added to the navigation rail by adding a button element with the fab class name.

<div class="list">
  <aside class="navigation-rail">
    <button class="fab">
      <i class="material-icons">add</i>
    </button>
  </aside>
</div>

Icon Button

An icon button can be added to the navigation rail by adding a button element with the icon-button class name. The icon button is typically used to open a menu.

<div class="list">
  <aside class="navigation-rail">
    <button class="icon-button">
      <i class="material-icons">menu</i>
    </button>
  </aside>
</div>

Variants

Default

<div class="list">
  <aside class="navigation-rail">
    <button class="icon-button">
      <i class="material-icons">menu</i>
    </button>
    <button class="fab">
      <i class="material-icons">add</i>
    </button>
    <nav>
      <input type="radio" name="nav-rail" value="home" id="home" checked />
      <label class="navigation-icon" for="home">
        <i class="material-icons">home</i>
        <span>Home</span>
      </label>
      <input type="radio" name="nav-rail" value="profile" id="profile" />
      <label class="navigation-icon" for="profile">
        <i class="material-icons">person</i>
        <span>Profile</span>
      </label>
      <input type="radio" name="nav-rail" value="settings" id="settings" />
      <label class="navigation-icon" for="settings">
        <i class="material-icons">settings</i>
        <span>Settings</span>
      </label>
    </nav>
  </aside>
</div>

Middle

<div class="list">
  <aside class="navigation-rail middle">
    <button class="icon-button">
      <i class="material-icons">menu</i>
    </button>
    <button class="fab">
      <i class="material-icons">add</i>
    </button>
    <nav>
      <input type="radio" name="nav-rail" value="home" id="home" checked />
      <label class="navigation-icon" for="home">
        <i class="material-icons">home</i>
        <span>Home</span>
      </label>
      <input type="radio" name="nav-rail" value="profile" id="profile" />
      <label class="navigation-icon" for="profile">
        <i class="material-icons">person</i>
        <span>Profile</span>
      </label>
      <input type="radio" name="nav-rail" value="settings" id="settings" />
      <label class="navigation-icon" for="settings">
        <i class="material-icons">settings</i>
        <span>Settings</span>
      </label>
    </nav>
  </aside>
</div>

Bottom

<div class="list">
  <aside class="navigation-rail bottom">
    <button class="icon-button">
      <i class="material-icons">menu</i>
    </button>
    <button class="fab">
      <i class="material-icons">add</i>
    </button>
    <nav>
      <input type="radio" name="nav-rail" value="home" id="home" checked />
      <label class="navigation-icon" for="home">
        <i class="material-icons">home</i>
        <span>Home</span>
      </label>
      <input type="radio" name="nav-rail" value="profile" id="profile" />
      <label class="navigation-icon" for="profile">
        <i class="material-icons">person</i>
        <span>Profile</span>
      </label>
      <input type="radio" name="nav-rail" value="settings" id="settings" />
      <label class="navigation-icon" for="settings">
        <i class="material-icons">settings</i>
        <span>Settings</span>
      </label>
    </nav>
  </aside>
</div>

Design Tokens

Resources

• MDN
• Material Design