Material Design Bottom Navigation
Documents bottom navigation bars for three to five primary app destinations at the bottom of mobile screens, with icons, labels, selected state, and destination-only behavior.
What this source can teach
Use this source to compare a documented solution with the task and states in your own product.
- Start with the original. Open the source and find the guidance or example relevant to your task.
- Trace the connection. Use the claim notes below to see how this site applies the source to specific patterns.
- Check the setting. Compare the source's platform, people, and constraints with your own decision.
Pattern Decisions This Source Supports
| Pattern | Supported decision | Required contract | Claim note |
|---|---|---|---|
| Bottom navigation | Choose bottom navigation for three to five top-level mobile destinations of similar importance. | Activating an item switches to its top-level destination rather than performing a transient command. | Material documents bottom navigation as a mobile bar for three to five primary destinations, with selected state and destination-only behavior. |
| Bottom sheet | Choose bottom sheet when contextual details, options, or controls are best reached from the lower edge of a mobile viewport while the background remains useful for orientation. | The sheet enters from the bottom edge and remains visually attached to that edge or device safe area. | Material bottom navigation guidance supports the distinction from persistent bottom destinations. |
| Responsive navigation adaptation | Choose responsive navigation adaptation when the navigation surface itself must change across viewport, posture, orientation, or destination-count constraints. | The adapted surface changes presentation, not the user's destination model. | Supports compact bottom navigation constraints for destination count and selected state. |
Comparisons supported by this source
- Bottom sheet vs sheet vs drawer vs bottom navigation
Material bottom navigation guidance supports the distinction between persistent destinations and temporary contextual bottom surfaces.
- Breadcrumbs vs tabs vs bottom navigation
Material documents bottom navigation as three to five primary mobile destinations, not menus or dialogs.
- Global navigation vs breadcrumbs vs bottom navigation
Material bottom navigation guidance supports compact mobile switching between top-level destinations.
- Header / top app bar vs global navigation vs bottom navigation
Material bottom navigation guidance distinguishes persistent mobile destinations from app bar actions.
- Navigation drawer vs side navigation vs bottom navigation
Material bottom navigation guidance distinguishes persistent mobile destination switching from drawer access.
- Responsive navigation adaptation vs global navigation vs bottom navigation vs navigation drawer vs side navigation vs header
Supports compact bottom-navigation destination-count and selected-state constraints.
Evidence Role
This source is treated as pattern-library evidence. Its value comes from the specific claims and setting described above.
Publisher: Material Design. Last checked: .