# AppBar

Source: https://design.ritchiebros.com/components/surfaces/app-bar/

An app bar displays information and actions relating to the current screen, such as the title, primary navigation, and top-level actions. It typically sits along the top of the layout.

## Figma

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

## Storybook

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

## Best practices

- Keep it to a small set of the most important, high-level actions.
- Maintain a consistent position and content pattern across screens.
- Give icon-only actions accessible labels.
- Consider how the bar adapts on small screens — collapse actions into a menu when space is tight.

## Do’s and don’ts

**Do:** Surface a few top-level actions and the current context.

**Don’t:** Crowd the app bar with every possible action on the screen.

## Related components

- [Drawer](https://design.ritchiebros.com/components/navigation/drawer/)
- [Breadcrumbs](https://design.ritchiebros.com/components/navigation/breadcrumbs/)
- [Tabs](https://design.ritchiebros.com/components/navigation/tabs/)