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-bar/style.css');

Usage

Start with a nav or div element and add the navigation-bar class name:

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

Navigation Icons

A navigation bar 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 bar.

<div class="list">
  <nav class="navigation-bar">
    <input type="radio" name="navigation-bar" 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="navigation-bar" 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>
</div>

Styling

Since the bottom app bar is meant to be at the bottom of the screen, it is recommended to use a div or footer element with position fixed or sticky and bottom: 0 to keep it at the bottom of the screen.

.bottom-app-bar {
  position: fixed; /* or sticky */
  bottom: 0;
}

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

Design Tokens

Resources

• MDN
• Material Design