# Tabs

Source: https://design.ritchiebros.com/components/navigation/tabs/

Use tabs to alternate among related views within the same context.

## Figma

The Figma reference for **Tabs** will appear here once the design link is added.

## Storybook

Interactive examples for **Tabs** will render here once the Storybook link is wired in.

## Best practices

- Represent the same kind of content across tabs, such as one list with different filters — don’t group dissimilar content.
- Keep only one tab active at a time.
- Let people complete their work within a tab rather than jumping back and forth.
- Don’t use tabs for primary navigation.

## Do’s and don’ts

**Do:** Use short, scannable labels, usually a single word: “All”, “Open”, “Unpaid”.

**Don’t:** Write long, sentence-like tab labels or repeat the section name in each tab.

## Related components

- [AppBar](https://design.ritchiebros.com/components/surfaces/app-bar/)
- [Breadcrumbs](https://design.ritchiebros.com/components/navigation/breadcrumbs/)