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/list/style.css');
@import url('https://kherrick.github.io/material-design-lite/css/components/top-app-bar/style.css');

Usage

Start with a header element and add the top-app-bar class name:

<header class="top-app-bar">
   <span class="title">Title</span>
</header>

The top-app-bar class name is implicit when using the header element.

Scrollable

Add the scrolled class name to the top-app-bar to make it have a scrollable effect.

<header class="top-app-bar scrolled">
  <span class="title">Title</span>
</header>

const header = document.querySelector(".top-app-bar");
window.addEventListener("scroll", (e) => {
  if (window.scrollY > 0) {
    header.classList.add("scrolled");
  } else {
    header.classList.remove("scrolled");
  }
});

Variants

Default

Default top app bar styling.

<header class="top-app-bar center-aligned">
  <button class="icon-button leading">
    <i class="material-icons">menu</i>
  </button>
  <span class="title">Title Large</span>
  <div class="actions">
    <button class="icon-button">
      <i class="material-icons">search</i>
    </button>
  </div>
</header>

Small

Small top app bar styling.

<header class="top-app-bar small">
  <button class="icon-button leading">
    <i class="material-icons">arrow_back</i>
  </button>
  <span class="title">Title Large</span>
  <div class="actions">
    <button class="icon-button">
      <i class="material-icons">info</i>
    </button>
    <button class="icon-button">
      <i class="material-icons">filter_list</i>
    </button>
    <button class="icon-button">
      <i class="material-icons">settings</i>
    </button>
  </div>
</header>

Medium

Medium top app bar styling.

<header class="top-app-bar medium">
  <button class="icon-button leading">
    <i class="material-icons">arrow_back</i>
  </button>
  <span class="title">Headline Small</span>
  <div class="actions">
    <button class="icon-button">
      <i class="material-icons">info</i>
    </button>
    <button class="icon-button">
      <i class="material-icons">filter_list</i>
    </button>
    <button class="icon-button">
      <i class="material-icons">settings</i>
    </button>
  </div>
</header>

Large

Large top app bar styling.

<header class="top-app-bar large">
  <button class="icon-button leading">
    <i class="material-icons">arrow_back</i>
  </button>
  <span class="title">Headline Medium</span>
  <div class="actions">
    <button class="icon-button">
      <i class="material-icons">info</i>
    </button>
    <button class="icon-button">
      <i class="material-icons">filter_list</i>
    </button>
    <button class="icon-button">
      <i class="material-icons">settings</i>
    </button>
  </div>
</header>

Design Tokens

Resources

• MDN
• Material Design