Navigation / The visual dictionary
Bottom navigation.
Primary navigation placed along the lower edge for frequent destination switching.
Also calledbottom navbottom navigation bar
01
UI illustrationSee it in context
02
What it is
Primary navigation placed along the lower edge for frequent destination switching. Keep each destination easy to reach and pair selected styling with a clear label.
When to use it
Use it for a few frequently visited top-level destinations on handheld screens.
Know the difference
Bottom navigation describes placement; tab bar is one common component used there.
03
Across platforms
iOSiPadOSAndroidWeb
iOS · iPadOS · Android · Web
Material uses navigation bars on phones; iOS typically expresses this as a tab bar, and larger screens may move it elsewhere.
04
Go to the source
Primary documentation for the pattern and its platform conventions.