Tab bars
A tab bar is a navigation component that displays a set of tabs, anchored at the bottom of a screen, allowing users to quickly switch between primary sections of an app.
Philosophy
Tab bars provide direct access to key sections of an interface.
They encourage shallow navigation by surfacing the most important areas.
They keep navigation consistent and predictable across the app.
They work best when there are 2–5 core destinations.
Anatomy
Variants
Tabs
Anchored at the bottom, Holding tabs
+ Search
Includes a distinct search item at the trailing end.
States
Default
All tabs visible, one selected.
Material
Liquid glass
Usage tips
Dos
Limit to 2–5 top-level destinations.
Use concise labels.
Use icons that are universally recognizable.
Don’ts
Don’t use tab bars for deep hierarchies — use sidebar instead.
Don’t use vague labels like “Stuff” or “More.”
Real-world example
