Top Bars

Preview

A screen header with a title, a caption, a back button and up to two actions. On iOS it maps to the NavigationStack toolbar, on Android to a TopAppBar.

The bar has no fill of its own until Glass is turned on, so it sits on whatever is behind it. The title block takes what the actions leave, 236 here.

How tall is a Top Bar?

Sm and md bars are 64 tall and lg is 132. Sm keeps the title on the back button's row at 20. Md is the same bar with a 24 title. Lg gives a 30 title its own row underneath, the pattern that collapses into sm as the user scrolls.

A root screen has nowhere to go back to, so switch Show Back Chevron off there, and Show Caption too when the title says enough.

Each size has its own type pairing. The title is 20 Semi Bold at sm, 24 Semi Bold at md and 30 Medium at lg, and the lg title row is 72 tall with the caption at 14.

Titles at 24 and above are set in the heading face, Inter Display.

Which actions can a Top Bar hold?

Three options on one axis: nothing, one filled button for what this screen is for, or up to two quiet ones in one capsule. The title block shrinks to make room, so a long title truncates sooner.

Main Button is a brand circle with a white check. Secondary Actions is one 88 wide capsule holding two 44 circles, raised like the back button, so the pair reads as one control.

Two is the ceiling the component ships, because a third would eat the title.

Every circle on the bar is a Button instance, so Pressed, Focused and Disabled behave as on Button. Press a circle in the specimen to see the pressed fill, and tab to one to see the focus ring.

When should I turn Glass on?

Turn it on when the bar floats over scrolling content that must stay readable underneath. Glass is one boolean, off by default, and on a plain background it blurs nothing.

What is Section Header?

Section Header is a separate component for headers inside a screen: a title over a block of content with one optional link. Use it to break a long screen into groups the eye can scan.

The title runs 18 on a 28 line and the link is 36 tall, which is the height of the row.

How does Top Bar differ on iOS and Material 3?

Top Bar is one header for both platforms: a back button, a title and up to two actions. Material 3 has its own top app bar, and the Apple pages draw no navigation bar, only the bottom iOS / Toolbar.

The minimum touch target is 44 on iOS and 48 on Android, from platform/min-touch-target. Every circle on the bar is 44, so it meets the iOS minimum and sits 4 under the Android one.

For a Compose build, pad each hit area to 48 and keep the drawn circle at 44. See Platform Bridge and the Material 3 page.

Properties

Two variant axes and five instance properties on Top Bar. Section Header is its own component with two.

A real header is this component plus whatever the platform draws above it, such as the status bar. Top Bar has no search field of its own.

Tokens

Every value the two components read, resolved to the primitive underneath.

Every glyph is drawn at 22. Geometry runs on spacing/16 64, spacing/11 44, spacing/6 24, spacing/4 16, spacing/3 12, spacing/2 8 and spacing/1 4.

The caption uses the product soft text color, which measures 3.26:1 on white and is a documented product choice. Raise it in your own product if the caption carries essential information.

Every circle on the bar is a Button, so in code it takes keyboard focus and shows the focus ring, and an icon-only circle needs an accessible name such as Back.

Which size should I use?

Use md on the root screen of a tab, sm on every screen pushed from it, and lg where the screen is a destination and the title is worth the room.

Keep the back button on pushed screens: on Android hardware without a back key it is the only way out. Decide the actions before the title, because the title block is what they leave.