# Top app bar

> The bar at the top of a screen with its title, a way back and a few actions. Material 3 calls it the top app bar; Apple calls it a navigation bar.

Page: https://www.appetiteui.com/academy/glossary/top-app-bar. Top app bar vs iOS navigation bar. Also called Navigation bar (iOS), Toolbar.

## At a glance

|  | iOS | Android (Material 3) | Appetite UI |
| --- | --- | --- | --- |
| Name | Navigation bar | Top app bar | Top Bar |
| Top bar height | 44 pt | 64 dp | `platform/bar/top-height` |

| Component | iOS | Material 3 | What differs |
| --- | --- | --- | --- |
| Top bar | iOS / Toolbar on a 44 high top bar | M3 / Top app bar, Small 64 high, Medium 112, Large 152 | Material has four bar types: Small, Center-aligned, Medium and Large |

## In practice

The two names cross over: an iOS navigation bar is at the top, a Material navigation bar is at the bottom. Saying top app bar and tab bar avoids the mix up.

Appetite UI draws it as Top Bar, whose height reads platform/bar/top-height: 44 on iOS and 64 for the Material small bar.

## Questions

### How tall is the top bar on iOS and Android?

Appetite UI’s Platform collection gives the top bar 44 points on iOS and 64 dp on Android, Material’s small top app bar. Material 3 also has medium and large top app bars, 112 and 152 dp, which carry a bigger title.

### What does Apple call the top app bar?

A navigation bar. It holds the title, the back button and a few actions; on iOS 26 and later its buttons sit on Liquid Glass over the content.

## Sources

1. [Apple Human Interface Guidelines: Navigation bars](https://developer.apple.com/design/human-interface-guidelines/navigation-bars)
2. [Material Design 3: App bars](https://m3.material.io/components/app-bars/overview)

## Related

- Docs: [Top Bars](https://www.appetiteui.com/docs/top-bars)
- Docs: [Toolbar](https://www.appetiteui.com/docs/toolbar)
- Article: [iOS vs Material 3: what changes per component](https://www.appetiteui.com/blog/ios-vs-material-3-components)
- Glossary: [Tab bar](https://www.appetiteui.com/academy/glossary/tab-bar)
- Glossary: [Status bar](https://www.appetiteui.com/academy/glossary/status-bar)