# Tabs

> Tabs switch between related views inside one screen, with one tab selected at a time. Material 3 has primary and secondary tabs, and iOS has no top tabs: its tab bar moves between top-level destinations.

Page: https://www.appetiteui.com/glossary/tabs. Tabs vs tab bar: Material 3 tabs and iOS. Also called Primary tabs, Secondary tabs, Top tabs.

## Why it matters

Tabs and the tab bar are confused constantly, and the mix-up ships a broken navigation: tabs change the view of one thing, the tab bar changes where you are in the app.

On iOS the nearest control for switching views is the segmented control.

## iOS and Android

|  | iOS | Android (Material 3) | Appetite UI |
| --- | --- | --- | --- |
| Name | No top tabs: segmented control; the Tab bar is for destinations | Primary tabs and secondary tabs | Tab |
| Placement | Tab bar at the bottom, for destinations | Primary tabs under the app bar; secondary tabs inside content | See below |
| Tab width (Material Components) | Set by the system | 72 dp minimum when scrollable, 264 dp maximum | See below |

## In Appetite UI

Appetite UI Tab is 48 or 36 high with a 2 pt rule and a 1 pt hairline, and it never changes the top-level destination. For that the kit has Navigation, the tab bar.

## Example

A profile screen has the tabs Posts, Replies and Likes under the header. Swiping the content moves the tab; the bottom bar stays on Profile.

## Common mistakes

- Using tabs for top-level destinations. Use the tab bar.
- Putting more tabs in a fixed row than fit. Make the row scrollable or cut the list.
- Labels that truncate. Use single words.
- Styling the selected tab only by color. Add the rule as well.

## Questions

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

A tab bar holds the top-level destinations of an app at the bottom of the screen. Tabs switch between views within one screen. The names cross between iOS and Material 3, so say which one you mean.

### What are primary and secondary tabs?

Primary tabs sit at the top of the content under an app bar. Secondary tabs divide a content area further, below a primary level.

## Sources

1. [Apple Human Interface Guidelines: Tab bars](https://developer.apple.com/design/human-interface-guidelines/tab-bars)
2. [Material Design 3: Tabs](https://m3.material.io/components/tabs/overview)
3. [Material Components for Android: Tabs](https://github.com/material-components/material-components-android/blob/master/docs/components/Tabs.md)

## Related

- Docs: [Tab](https://www.appetiteui.com/docs/tab)
- Docs: [Navigation](https://www.appetiteui.com/docs/navigation)
- 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/glossary/tab-bar)
- Glossary: [Segmented control](https://www.appetiteui.com/glossary/segmented-control)
- Glossary: [Top app bar](https://www.appetiteui.com/glossary/top-app-bar)