Navigation
App Bar
A top bar built as a compound family: MAppBar owns layout integration and the scroll fill, while MAppBarNav, MAppBarTitle, and MAppBarActions place themselves. Size and alignment are independent axes, and a subtitle works on every size.App Bar
Focus and keyboard
Every control in the bar must be reachable and operable from the keyboard, in a predictable order.
Leading takes initial focus
Focus should land on the leading button first, since it is the first interactive element of the bar.
Tab through the controls
Keep DOM order matching visual order so Tab moves leading → actions in the reading sequence.
Activate with Space or Enter
Interactive elements activate with Space or Enter and show a visible focus ring.
Names and contrast
A visible bar still needs a complete assistive-technology contract.
Title is the accessible name
The title text names the bar; add context to its accessible label when the visible text is not enough on its own.
Label every icon button
Leading and trailing icon buttons need an aria-label describing the action they take, like Search or Open navigation menu.
Keep 3:1 contrast
Custom container or text colors must keep at least 3:1 contrast so the bar and its labels stay readable.
Actions stay reachable
The scroll fill is presentational and must not affect operability.
Persistent actions
Keep app-bar actions available while content scrolls; the fill changes appearance only, never focusability.
Respect reduced motion
The fill transition is subtle and honors reduced-motion preferences at the system level.