# 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/glossary/tab-bar. Tab bar vs navigation bar: iOS and Material 3. Also called Bottom navigation, Navigation bar (Material).

## Why it matters

The tab bar is the main route through an app on a phone and sits under the thumb. Choose the destinations badly and everything else is hidden.

The names cross between platforms, so a spec that says navigation bar can mean either bar.

## iOS and Android

|  | 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.

## Common mistakes

- Putting more than five destinations in it. Move the rest to a list.
- Using a tab for an action and not a place.
- Saying navigation bar for the bottom bar on iOS. Say tab bar.

## 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/glossary/top-app-bar)
- Glossary: [Navigation drawer](https://www.appetiteui.com/glossary/navigation-drawer)
- Glossary: [Safe area](https://www.appetiteui.com/glossary/safe-area)
- Glossary: [Search bar](https://www.appetiteui.com/glossary/search-bar)
- Glossary: [SF Symbols and Material Symbols](https://www.appetiteui.com/glossary/icon-sets)
- Glossary: [Tabs](https://www.appetiteui.com/glossary/tabs)
- Glossary: [Badge](https://www.appetiteui.com/glossary/badge)
- Glossary: [Toolbar](https://www.appetiteui.com/glossary/toolbar)