Nav

Navigation is how people move around the app. Two pieces: the bottom bar (top-level destinations, always reachable with a thumb) and the top app bar (screen title, back, and one or two screen-level actions).

Use when

Bottom bar

• 3-5 top-level destinations, switched with a thumb.

Top app bar

• Screen title, back navigation, one or two screen actions.

Anatomy · Variants · Design guidelines · Tokens

To document from the Figma set. Bottom bar item (icon + label, selected state), top app bar layouts, and how both sit inside the 360 × 667 safe areas (status bar, no home-indicator inset).