# 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>

### Search

## Theme Settings

### Light & Dark

### Theme Colors

### Layouts