# BottomNavigation

Source: https://design.ritchiebros.com/components/navigation/bottom-navigation/

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.

## Related components

- [Tabs](https://design.ritchiebros.com/components/navigation/tabs/)
- [AppBar](https://design.ritchiebros.com/components/surfaces/app-bar/)
- [Drawer](https://design.ritchiebros.com/components/navigation/drawer/)