Anatomy

An app bar consists of a background container (A), a title or label (B), optional leading element (C), and optional trailing actions (D).

Purpose

The app bar anchors navigation and provides context for the current screen — either via a title, back action, or quick access buttons.

Title clarity

The title should clearly describe the current view and should never wrap into multiple lines.

Leading element

The leading element is typically a back arrow or close icon, and must follow platform navigation patterns.

Trailing actions

Place quick actions (icons only) on the right — such as search, edit, or help. Try to limit to 1–2 items.

Elevation & shadow

Use system elevation rules — show a directional shadow only when content scrolls beneath the bar.