Skip to content
IndexDesign corpus

Tab Bar Navigation

Navigation & Command · 7 checks · 12 resources

The persistent bottom bar that defines a mobile app's top-level information architecture.

Before you ship7 checks
  1. 01Tab count — limited to the most important destinations; three to five items is the typical range
  2. 02Icon and label — each tab paired with both an icon and a text label unless the icon is unambiguous
  3. 03Active and default states — the active tab visually distinct by colour, border or icon weight
  4. 04Badge counts — for tabs with unread counts like messages and notifications, updating in real time
  5. 05Fixed presence — the tab bar remains visible across its sections, and may be hidden a level deeper
  6. 06Tap target size — each tab at least 44×44pt to be reliably tappable with a thumb in any grip
  7. 07Haptic feedback — a subtle tap haptic on tab selection confirming the action
Resources that help you build this12