--- title: Top Bars description: Top Bar is the header at the top of a mobile screen: title, back button and up to two actions, in three sizes. Figma component for iOS and Android. group: Components source: https://www.appetiteui.com/docs/top-bars dateModified: 2026-10-08 --- # Top Bars Updated: October 8, 2026. The header at the top of a screen: where you are, how to get back, and at most a couple of things to do here. Size sm is for pushed screens, md for the root screen of a tab, lg for a screen whose title is the point. ## 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. Specimen: Size sm, Actions False, Show Caption and Show Back Chevron true. 340 x 64, padding 0 24, gap 12, back button 44. The back button is a white raised circle with a hairline and dropShadow/xs. The two secondary actions share one capsule. 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. Specimen: Size sm, md, then lg, all Actions False. sm and md 64 in one row, lg 132 as a 60 nav row over a 72 title block. Size md is for the root screen of a tab, the first thing someone sees when they switch tabs. The title takes the page title size, 24, on the bar's row, and pushed screens use sm. 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. Specimen: Size md on a tab root, Show Back Chevron and Show Caption false. 340 x 64, title 24/32 inline, no back button and no caption. 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. Specimen: Actions False, Main Button, Secondary Actions. title block 236, then 180, then 136. 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](https://www.appetiteui.com/docs/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. Specimen: Glass true, over a hatch so there is something to see through. bg/glass at 72 percent in light and 55 in dark, under a 16 blur. Glass is drawn with the Appetite UI effect style backdropBlur/md under the bg/glass fill, a blur of 16, so the bar renders the same in Figma and on the web. ## 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. Specimen: Section Header, Link true then false. 340 wide, title 18/28 Semi Bold, link 36 tall. 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. | Appetite UI component | iOS counterpart | Material 3 counterpart | What differs | | --- | --- | --- | --- | | Top Bar, sm and md at 64, lg at 132 | NavigationStack navigation bar. The Apple pages draw no navigation bar set: iOS / Toolbar there is the bottom toolbar | M3 / Top app bar: Small 64, Medium 112, Large 152 | Appetite UI has three sizes and the same layout on both platforms. Material has four bar types, including Center-aligned | | Back button, 44 | Back button in the navigation bar | Navigation icon in the top app bar | Appetite UI draws a raised white circle, the platform bars draw a plain glyph | | Section Header | Section header in a List | List subheader | Appetite UI adds one optional link, See all, at the end of the row | 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](https://www.appetiteui.com/docs/platform-bridge) and the [Material 3 page](https://www.appetiteui.com/docs/material-3). ## Properties Two variant axes and five instance properties on Top Bar. Section Header is its own component with two. | Property | Type | Default | | --- | --- | --- | | `Size` | lg \| sm \| md | lg | | `Actions` | False \| Main Button \| Secondary Actions | False | | `Title`, `Caption Text` | Text | Title, Caption | | `Show Caption` | Boolean | true | | `Show Back Chevron` | Boolean | true | | `Glass` | Boolean | false | | `Section Title`, `Link` | Text, Boolean, on Section Header | Section title, true | | Component | Variants | Size | | --- | --- | --- | | `Top Bar` | nine, Size crossed with Actions | 340 x 64 at sm and md, 340 x 132 at lg | | `Section Header` | not a set | 340 x 36 | 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. | Token | Light | Dark | Applied to | | --- | --- | --- | --- | | `text/strong-950` | #0E0E0F | #FFFFFF | Title, and the Section Header title | | `text/soft-500` | #8E8E93 | #AEAEB2 | Caption | | `bg/raised` | #FFFFFF | #242427 | Back circle and the secondary capsule | | `border/soft-100` | #E9E9EA | #2F2F31 | The hairline round both | | `fg/sub-700` | #48484A | #C7C7CC | Back chevron and the secondary glyphs | | `brand/base` | #155DFC | #2B7FFF | Main button fill, the section link | | `static/static-white-0` | #FFFFFF | #FFFFFF | The check on the main button | | `bg/glass` | #FFFFFF at 72% | #242426 at 55% | Background, shown when Glass is true | | Effect style | Value | Applied to | | --- | --- | --- | | `dropShadow/xs` | 0 1 2 at 4% black, then 0 4 4 at 1% black | Back circle and the secondary capsule | | `backdropBlur/md` | Background blur 16 | Background, shown when Glass is true | 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. - Do: Name the screen in the title and put the qualifier in the caption. One filled button for the one thing this screen exists to finish. - Avoid: Do not write a sentence into a block that is 136 wide once two actions are in. It truncates in the middle and the half that survives is the half nobody needed. 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. [Settings screen design for iOS and Android](https://www.appetiteui.com/blog/settings-screen-design-ios-android). ## In the screens and the glossary - Glossary: [Top app bar](https://www.appetiteui.com/academy/glossary/top-app-bar) - Screens: [Settings screens](https://www.appetiteui.com/screens/patterns/settings)