# Core/Breadcrumbs - Design

Renders a breadcrumb trail with built-in support for collection behavior, keyboard support, and current-page semantics. Wrap items with {@link Breadcrumb}. The last item should represent the current page (typically without an `href`).

## Usage

Use Breadcrumbs on views that sit deeper than the home or root level so people see where they are in the hierarchy and can jump to ancestors.

Place them above the page title, keep labels aligned with each destination's title, and render every segment except the current page as a link.

## Layout and spacing

* Place above the page heading.

## Behavior

* Current page item is not a link (no click interaction).

## Content

* Use the same label as the page heading for each item.
* Title case.
* Keep each label concise (1-3 words).

## Best Practices

Do:

* Do make all items except the last one clickable links.
* Do mark the current page with `aria-current="page"`.

Don't:

* Don't show breadcrumbs on top-level pages — there is no trail to show.
* Don't use breadcrumbs when the IA is flat and would produce a single segment.
* Don't use custom separator text that is read by screen readers.

## Accessibility

* Wrap in a `<nav aria-label="breadcrumb">` element.
* Current page item uses `aria-current="page"`.
* Separator characters are `aria-hidden="true"`.

### Keyboard interaction

| Key           | Function                                                                                                                                                                                                |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `Tab`         | Move focus forward along the breadcrumb trail.                                                                                                                                                          |
| `Shift + Tab` | Move focus back along the breadcrumb trail.                                                                                                                                                             |
| `Enter`       | Activates the currently focused link. If a dropdown crumb has focus, opens the menu and gives focus to the currently selected option. If a menu item has focus, activates the item and closes the menu. |
| `Space`       | If a dropdown crumb has focus, opens the menu and gives focus to the currently selected option.                                                                                                         |
| `Down Arrow`  | If a dropdown crumb has focus, opens the menu and gives focus to the currently selected option. If a menu item has focus, moves focus to the next item.                                                 |
| `Up Arrow`    | If a menu item has focus, moves focus to the previous item.                                                                                                                                             |
| `Esc`         | If a dropdown crumb is open, closes the menu and returns focus to the trigger.                                                                                                                          |

* If a dropdown crumb is open: the `tab` and `shift`+`tab` keys do not navigate.

### Labeling

* Breadcrumbs represent a hierarchy and need to announce themselves accordingly. Using `aria-label`, a crumb should identify itself and its parents.
* Use `aria-current=”page”` to indicate the last page in the breadcrumb order.

## Related components

* [TabNav](?path=/docs/core-tabnav--design) — For in-page section navigation.