Top app bars

Top app bars display information and actions at the top of a screen.
Overview

Use a top app bar to provide content and actions related to a current screen, such as navigation, screen headlines, and actions. The information and actions offered are primarily contextual and specific to a screen, but may also include access to key cross-app journeys.
LOGO

Product

Headline

            
<!-- top app bar with notif -->
<div class="w-full sm:w-[400px] h-16 flex flex-row items-center justify-between gap-1.5 bg-surface-100 dark:bg-surfacedark-100">
  <button class="material-symbols-outlined relative !inline-flex !items-center justify-center w-12 h-12 gap-x-2 py-2.5 px-6 rounded-[6.25rem] text-sm tracking-[.00714em] text-center font-medium hover:bg-surface-300 focus:bg-surface-400 dark:text-primary-200 dark:hover:bg-surfacedark-300 dark:focus:bg-surfacedark-400">
    menu
  </button>
  <h2 class="flex flex-grow justify-start text-[1.375rem] leading-7">LOGO</h2>

  <div class="flex flex-row justify-end items-center">
    <button class="relative flex flex-row items-center justify-center w-12 h-12 gap-x-2 py-2 px-4 rounded-[6.25rem] text-sm tracking-[.00714em] font-medium  hover:bg-surface-200 focus:bg-surface-400 dark:hover:bg-surfacedark-200 dark:focus:bg-surfacedark-400">
      <span class="material-symbols-outlined">mail</span>
      <!-- new -->
      <span class="pointer-events-none absolute top-2 right-2 w-4 h-4 flex items-center justify-center rounded-full text-[11px] leading-none tracking-[.045em] font-medium bg-error-600 dark:bg-error-200 text-white dark:text-error-800">1</span>
    </button>
    <button class="relative flex flex-row items-center justify-center w-12 h-12 gap-x-2 py-2 px-4 rounded-[6.25rem] text-sm tracking-[.00714em] font-medium  hover:bg-surface-200 focus:bg-surface-400 dark:hover:bg-surfacedark-200 dark:focus:bg-surfacedark-400">
      <span class="material-symbols-outlined">notifications</span>
      <!-- new -->
      <span class="pointer-events-none absolute top-2 right-2 w-4 h-4 flex items-center justify-center rounded-full text-[11px] leading-none tracking-[.045em] font-medium bg-error-600 dark:bg-error-200 text-white dark:text-error-800">5</span>
    </button>
    <button class="relative flex flex-row items-center justify-center w-12 h-12 gap-x-2 py-2 px-4 rounded-[6.25rem] text-sm tracking-[.00714em] font-medium  hover:bg-surface-200 focus:bg-surface-400 dark:hover:bg-surfacedark-200 dark:focus:bg-surfacedark-400">
      <span class="material-symbols-outlined">person</span>
    </button>
  </div>
</div>

<!-- center top app bar -->
<div class="w-full sm:w-[400px] h-16 flex flex-row items-center justify-between gap-1.5 bg-surface-100 dark:bg-surfacedark-100">
  <button class="material-symbols-outlined relative !inline-flex !items-center justify-center w-12 h-12 gap-x-2 py-2.5 px-6 rounded-[6.25rem] text-sm tracking-[.00714em] text-center font-medium hover:bg-surface-300 focus:bg-surface-400 dark:text-primary-200 dark:hover:bg-surfacedark-300 dark:focus:bg-surfacedark-400">
    menu
  </button>
  <h2 class="text-[1.375rem] leading-7">Product</h2>
  <button class="material-symbols-outlined relative !inline-flex !items-center justify-center w-12 h-12 gap-x-2 py-2.5 px-6 rounded-[6.25rem] text-sm tracking-[.00714em] text-center font-medium hover:bg-surface-300 focus:bg-surface-400 dark:text-primary-200 dark:hover:bg-surfacedark-300 dark:focus:bg-surfacedark-400">
    person
  </button>
</div>

<!-- small top app bar -->
<div class="w-full sm:w-[400px] h-16 flex flex-row items-center justify-between gap-1.5 bg-surface-100 dark:bg-surfacedark-100">
  <button class="material-symbols-outlined relative !inline-flex !items-center justify-center w-12 h-12 gap-x-2 py-2.5 px-6 rounded-[6.25rem] text-sm tracking-[.00714em] text-center font-medium hover:bg-surface-300 focus:bg-surface-400 dark:text-primary-200 dark:hover:bg-surfacedark-300 dark:focus:bg-surfacedark-400">
    arrow_back
  </button>
  <h2 class="flex flex-grow justify-start text-[1.375rem] leading-7">Product</h2>
  <div class="flex flex-row justify-end items-center">
    <button class="material-symbols-outlined relative !inline-flex !items-center justify-center w-12 h-12 gap-x-2 py-2.5 px-6 rounded-[6.25rem] text-sm tracking-[.00714em] text-center font-medium hover:bg-surface-300 focus:bg-surface-400 dark:text-primary-200 dark:hover:bg-surfacedark-300 dark:focus:bg-surfacedark-400">
      attach_file
    </button>
    <button class="material-symbols-outlined relative !inline-flex !items-center justify-center w-12 h-12 gap-x-2 py-2.5 px-6 rounded-[6.25rem] text-sm tracking-[.00714em] text-center font-medium hover:bg-surface-300 focus:bg-surface-400 dark:text-primary-200 dark:hover:bg-surfacedark-300 dark:focus:bg-surfacedark-400">
      event
    </button>
    <button class="material-symbols-outlined relative !inline-flex !items-center justify-center w-12 h-12 gap-x-2 py-2.5 px-6 rounded-[6.25rem] text-sm tracking-[.00714em] text-center font-medium hover:bg-surface-300 focus:bg-surface-400 dark:text-primary-200 dark:hover:bg-surfacedark-300 dark:focus:bg-surfacedark-400">
      more_vert
    </button>
  </div>
</div>

<!-- medium top app bar -->
<div class="w-full sm:w-[400px] flex flex-col gap-1 bg-surface-100 dark:bg-surfacedark-100">
  <!-- top app bar -->
  <div class="w-full h-16 flex flex-row items-center justify-between gap-1.5">
    <button class="material-symbols-outlined relative !inline-flex !items-center justify-center w-12 h-12 gap-x-2 py-2.5 px-6 rounded-[6.25rem] text-sm tracking-[.00714em] text-center font-medium hover:bg-surface-300 focus:bg-surface-400 dark:text-primary-200 dark:hover:bg-surfacedark-300 dark:focus:bg-surfacedark-400">
      arrow_back
    </button>

    <div class="flex flex-row justify-end items-center">
      <button class="material-symbols-outlined relative !inline-flex !items-center justify-center w-12 h-12 gap-x-2 py-2.5 px-6 rounded-[6.25rem] text-sm tracking-[.00714em] text-center font-medium hover:bg-surface-300 focus:bg-surface-400 dark:text-primary-200 dark:hover:bg-surfacedark-300 dark:focus:bg-surfacedark-400">
        attach_file
      </button>
      <button class="material-symbols-outlined relative !inline-flex !items-center justify-center w-12 h-12 gap-x-2 py-2.5 px-6 rounded-[6.25rem] text-sm tracking-[.00714em] text-center font-medium hover:bg-surface-300 focus:bg-surface-400 dark:text-primary-200 dark:hover:bg-surfacedark-300 dark:focus:bg-surfacedark-400">
        event
      </button>
      <button class="material-symbols-outlined relative !inline-flex !items-center justify-center w-12 h-12 gap-x-2 py-2.5 px-6 rounded-[6.25rem] text-sm tracking-[.00714em] text-center font-medium hover:bg-surface-300 focus:bg-surface-400 dark:text-primary-200 dark:hover:bg-surfacedark-300 dark:focus:bg-surfacedark-400">
        more_vert
      </button>
    </div>
  </div>

  <h1 class="text-2xl px-4 mb-4">Headline</h1>
</div>

<!-- large top app bar -->
<div class="w-full sm:w-[400px] flex flex-col gap-1 bg-surface-100 dark:bg-surfacedark-100">
  <!-- top app bar -->
  <div class="w-full h-16 flex flex-row items-center justify-between">
    <button class="material-symbols-outlined relative !inline-flex !items-center justify-center w-12 h-12 gap-x-2 py-2.5 px-6 rounded-[6.25rem] text-sm tracking-[.00714em] text-center font-medium hover:bg-surface-300 focus:bg-surface-400 dark:text-primary-200 dark:hover:bg-surfacedark-300 dark:focus:bg-surfacedark-400">
      arrow_back
    </button>

    <div class="flex flex-row justify-end items-center">
      <button class="material-symbols-outlined relative !inline-flex !items-center justify-center w-12 h-12 gap-x-2 py-2.5 px-6 rounded-[6.25rem] text-sm tracking-[.00714em] text-center font-medium hover:bg-surface-300 focus:bg-surface-400 dark:text-primary-200 dark:hover:bg-surfacedark-300 dark:focus:bg-surfacedark-400">
        attach_file
      </button>
      <button class="material-symbols-outlined relative !inline-flex !items-center justify-center w-12 h-12 gap-x-2 py-2.5 px-6 rounded-[6.25rem] text-sm tracking-[.00714em] text-center font-medium hover:bg-surface-300 focus:bg-surface-400 dark:text-primary-200 dark:hover:bg-surfacedark-300 dark:focus:bg-surfacedark-400">
        event
      </button>
      <button class="material-symbols-outlined relative !inline-flex !items-center justify-center w-12 h-12 gap-x-2 py-2.5 px-6 rounded-[6.25rem] text-sm tracking-[.00714em] text-center font-medium hover:bg-surface-300 focus:bg-surface-400 dark:text-primary-200 dark:hover:bg-surfacedark-300 dark:focus:bg-surfacedark-400">
        more_vert
      </button>
    </div>
  </div>

  <h1 class="text-[1.75rem] leading-9 px-4 mb-4">Headline</h1>
</div>
Top app bars

Overview

LOGO

Product

Product

Headline

Headline

Search

Theme Settings

Light & Dark

Theme Colors

Layouts
