Top App Bar

navigation

Top app bars display navigation, actions, and text at the top of the screen. They provide content and actions related to the current screen.

Variants

Small

Default

Standard height app bar

Medium

Taller app bar with larger title

Large

Tallest app bar with expanded title area

Center-aligned

App bar with centered title

Properties

Name Type Required Default Description
variant enum - small Size and layout of the app bar
headline string - - The title text
scrollTarget string - - Selector for scroll container to respond to

States

flat

No elevation at top of content

elevated

Elevated when content scrolls beneath

expanded

Full height (medium/large)

collapsed

Compressed on scroll (medium/large)

Accessibility

Role: banner
Keyboard Support:
  • Tab - Move between action buttons
Screen Reader Notes: App bar acts as page banner. Title should be descriptive. Leading icon should have aria-label.

LLM Context

Intent: Provide consistent header with navigation and actions
Anti-Patterns:
  • App bar without title or aria-label
  • Too many action icons (more than 3)
  • Large variant on small screens
  • Missing leading navigation
Example Usage: 
<md-top-app-bar headline="Page Title"><md-icon-button slot="leading" aria-label="Menu"><md-icon>menu</md-icon></md-icon-button><md-icon-button slot="trailing" aria-label="Search"><md-icon>search</md-icon></md-icon-button></md-top-app-bar>
<md-top-app-bar variant="medium" headline="Settings"><md-icon-button slot="leading" aria-label="Back"><md-icon>arrow_back</md-icon></md-icon-button></md-top-app-bar>