Breadcrumbs

Breadcrumbs show a user their location on a website so they can easily navigate to find what they need.

View in Figma View in Storybook View in Github

import { ... } from '@ag.ds-next/react/breadcrumbs';

Breadcrumbs show users where they are in the website hierarchy and how to navigate back/up to previous levels or content. They appear as a row of links, usually at the top of the page.

Open in Playroom, opens in a new tab

<Breadcrumbs
	links={[
		{ href: '#', label: 'Home' },
		{ href: '#', label: 'Establishments' },
		{ label: 'Applications' },
	]}
/>

display above the main page heading (h1) as the first item inside the main landmark
display the main page heading in the breadcrumbs as plain text
match the current page name in the breadcrumb to the main page heading
use for pages with a large amount of content over more than two levels.

Don’t

shorten breadcrumb labels
use for pages with single-level hierarchy
use for multistep processes - use a Progress indicator.

Breadcrumbs are best applied to content pages and should not be used on form flows as they make it easier for users to navigate away from the form.

If you want to keep a user in a flow or to maintain the parent child relationship between two pages use a Back button instead.

Edit this page

Breadcrumbs

When to use the Breadcrumb component