# Flux 2.0 — Breadcrumbs

The path from a section to the current page, as a list of links.

Reference: https://flux.kaptio.com/components/breadcrumbs/
Requires: https://flux.kaptio.com/tokens/v2/flux.css and flux-components.css

## Use it when
Shows where a page sits in a hierarchy and gives one-step access to each level above it: Bookings, then a booking, then its passengers. The trail is an ordered list inside a labelled nav. The current page closes the trail in bold and is not a link. Long names truncate with an ellipsis rather than wrapping the trail onto a second line.

## Do not use it when
Not for a flat site with one level. Not as the only navigation; it complements the app shell. Not for steps in a process; use the Stepper.

## Markup

### Default

<nav aria-label="Breadcrumb">
  <ol class="flux-breadcrumbs">
    <li class="flux-breadcrumbs__item"><a class="flux-breadcrumbs__link" href="#">Bookings</a></li>
    <li class="flux-breadcrumbs__item"><a class="flux-breadcrumbs__link" href="#">Golden Circle Classic, 14 Sep</a></li>
    <li class="flux-breadcrumbs__item"><span aria-current="page">Passengers</span></li>
  </ol>
</nav>

## API
- nav aria-label="Breadcrumb" (element): The landmark. One per page.
- flux-breadcrumbs (class): On the ol.
- flux-breadcrumbs__item (class): On each li. Every item after the first draws a separator.
- flux-breadcrumbs__link (class): On each link above the current page.
- aria-current="page" (attribute): On the span that names the current page.

## Accessibility
- Label the nav "Breadcrumb" so it is distinct from the main navigation.
- Use an ordered list: the position of each level is part of its meaning.
- The separators are CSS, so they are not read out between items.
- Mark the last item with aria-current="page".

## Keyboard
- Tab: Moves through the links. The current page is not a stop.
- Enter: Follows the link.

## Tokens
- --flux-breadcrumbs-gap
- --flux-breadcrumbs-link | -link-hover | -current
- --flux-breadcrumbs-separator | -separator-size

## Do
- Start the trail at the section, not at a home link the app shell already provides.
- Use the same names as the pages they link to.

## Do not
- Do not make the current page a link.
- Do not type separators into the markup.
- Do not use breadcrumbs to show the steps of a process.