# Tab bar

> A tab bar is the row of top level destinations at the bottom of an app. Apple calls it a tab bar; Material 3 calls the same thing a navigation bar.

Page: https://www.appetiteui.com/academy/glossary/tab-bar. Tab bar vs navigation bar: iOS and Material 3. Also called Bottom navigation, Navigation bar (Material).

## At a glance

|  | iOS | Android (Material 3) | Appetite UI |
| --- | --- | --- | --- |
| Name | Tab bar | Navigation bar | Navigation |
| Tab bar height | 49 pt | 64 dp | `platform/bar/bottom-height` |

| Component | iOS | Material 3 | What differs |
| --- | --- | --- | --- |
| Navigation | iOS / Tab Bar, floating capsule 62 high, two to five tabs | M3 / Navigation bar, 412 × 80, three to five items | Material is a full width bar with a separate 24 high Gesture Navigation component, iOS floats on glass |

## In practice

Three to five destinations is the rule on both systems; more belong in a list. The selected tab is the only one in the accent color.

In Appetite UI it is the Navigation component, a floating capsule on iOS and a full width bar on Material. Its height comes from platform/bar/bottom-height, 49 on iOS and 64 on Android, the height Material 3 Expressive gave its navigation bar in 2025.

## Questions

### What is the difference between a tab bar and a navigation bar?

They are the same bottom row of destinations under two names: Apple says tab bar, Material 3 says navigation bar. On iOS a navigation bar is the bar at the top of the screen, which Material calls the top app bar.

### How tall is a tab bar on iOS and Android?

Appetite UI’s Platform collection gives a bottom bar 49 points on iOS and 64 dp on Android. Material 3 Expressive cut the navigation bar from 80 to 64 dp in 2025; the kit’s Material 3 pages still draw the 80 dp bar, and the iOS 27 tab bar floats as a glass capsule 62 high.

### How many tabs should a tab bar have?

Three to five. Apple suggests five or fewer so the tabs stay the same between compact and regular widths, and Material’s navigation bar is meant for three to five destinations.

## Sources

1. [Apple Human Interface Guidelines: Tab bars](https://developer.apple.com/design/human-interface-guidelines/tab-bars)
2. [Material Design 3: Navigation bar](https://m3.material.io/components/navigation-bar/overview)
3. [Material Components for Android: Bottom navigation, M3 Expressive update](https://github.com/material-components/material-components-android/blob/master/docs/components/BottomNavigation.md)

## Related

- Screens: [Dashboard screens](https://www.appetiteui.com/screens/patterns/dashboard)
- Docs: [Navigation](https://www.appetiteui.com/docs/navigation)
- Docs: [Material 3](https://www.appetiteui.com/docs/material-3)
- Article: [iOS vs Material 3: what changes per component](https://www.appetiteui.com/blog/ios-vs-material-3-components)
- Glossary: [Top app bar](https://www.appetiteui.com/academy/glossary/top-app-bar)
- Glossary: [Navigation drawer](https://www.appetiteui.com/academy/glossary/navigation-drawer)
- Glossary: [Safe area](https://www.appetiteui.com/academy/glossary/safe-area)