Bottom navigation lets people move between a few top-level destinations with a single tap. It’s anchored to the bottom of the screen, primarily on mobile.
Figma
The Figma reference for BottomNavigation will appear here once the design link is added.
Storybook
Interactive examples for BottomNavigation will render here once the Storybook link is wired in.
Best practices
- Use it for three to five equally important, top-level destinations.
- Keep destinations mutually exclusive and always accessible.
- Use clear icons, paired with short labels where space allows.
- Highlight the active destination.
Do’s and don’ts
Do
Surface three to five primary destinations.
Don’t
Cram in more than five destinations, or use it for actions rather than navigation.
Accessibility
- Icon-only destinations need accessible labels.
- Convey the selected destination to assistive technology, not just with color.