Skip to content

Breadcrumb

Navigation

A breadcrumb shows where the current page sits in the site hierarchy, from the home page down to the page itself, and links back to each parent page.

  • CSS

Maintained by Platform

    Usable — may still change

    DesignCSSAccessibility

    A breadcrumb is a list of links showing where the current page sits in the site hierarchy, from the home page down to the page itself. It helps users understand where they are relative to the site’s information architecture, and lets them jump straight back to any parent level.

    Anatomy

    Section titled “Anatomy”
    1. Breadcrumb bar
    2. Home link
    3. Ellipsis button
    4. Parent link
    5. Current page

    Every level is a list item, and every item except the last ends in a chevron separator. Screen readers skip the separators — the list already tells assistive technology the order of the levels.

    The trail always starts at Home, shown as an icon, and always ends at the current page, shown as heavier plain text rather than a link. Everything between is a parent page, drawn as a neutral link. When the trail is collapsed, the ellipsis button stands in for the hidden levels until the user opens it.

    When to use it

    Section titled “When to use it”

    Use a breadcrumb when users need to understand where they are in a hierarchy of three or more levels and benefit from jumping directly to a higher level.

    Use a breadcrumb when:

    • The hierarchy is three or more levels deep.
    • Users arrive from many entry points and need context on where they have landed.
    • The site has a large catalogue or content spread over many categories.
    • Users need to compare their position across branches of the hierarchy.
    • Search engines and assistive technology benefit from understanding the site’s structure.

    Avoid a breadcrumb when:

    • The flow is transactional or a form — use a Stepper instead.
    • It would act as primary wayfinding — a breadcrumb sits under the main navigation, never in place of it.
    • The page is a landing page or campaign content outside the permanent navigation.
    • The hierarchy is only one or two levels deep, which makes the trail redundant.
    • The content lives inside a modal or overlay.
    • The page is a system screen, such as a 404 or an error page.

    Properties

    Section titled “Properties”

    Home

    The first level is always Home, shown as a home icon in a borderless Icon Button rather than a text label. The icon is sm on mobile and md from tablet up, and stays visible in both the expanded and the collapsed desktop trail.

    Parent links

    Every level between Home and the current page is a neutral Link. Links are lg on mobile, for an easier tap target, and md from tablet up.

    Current page

    The last level names the page the user is on. It is plain text in body 6 heavy, never a link, so it reads as visually distinct from the levels before it.

    Separator

    A chevron sits after every level except the last, pointing towards the current page. It flips in right-to-left layouts.

    Expanded

    Every level is visible. When the trail is longer than the bar, it wraps onto further lines instead of scrolling or truncating.

    Collapsed

    Intermediate levels are hidden behind the ellipsis button. On desktop the trail keeps Home, the ellipsis, the immediate parent and the current page; on mobile it keeps only the ellipsis and the current page. Activating the ellipsis expands the trail in place.

    Platform considerations

    Section titled “Platform considerations”

    Desktop

    The bar is at least 56px tall with 40px of horizontal padding. Show the expanded trail by default; collapse it when a deep hierarchy would wrap onto several lines.

    Tablet

    Tablet follows the desktop layout: the same padding, the same Home icon and the same link size.

    Mobile

    Use the collapsed trail by default. The bar is at least 48px tall with 16px of horizontal padding, and the collapsed trail shows only the ellipsis and the current page. Expanded, the trail wraps across as many lines as it needs.

    Best practices

    Section titled “Best practices”

    Place the breadcrumb directly below the main navigation, at the top of the page content it describes.

    Do

    Start every trail at Home and end it at the current page. Mirror the site’s real hierarchy rather than the path the user happened to take. Keep the current page as plain text, and collapse long trails on mobile so the bar stays a single line until the user asks for more.

    Don't

    Don’t use a breadcrumb for step-by-step flows, as the only way to navigate, or on pages outside the site hierarchy. Don’t link the current page, skip levels or use a separator other than the chevron.

    Content guidelines

    Section titled “Content guidelines”

    Use the shortest label that still makes the concept clear — a noun phrase, without articles, filler words or verbs. Keep labels to 32 characters including spaces; when a page title is longer, shorten it while keeping the two or three words that carry its meaning. Always call the first level “Home”. Don’t use punctuation such as full stops or colons; ampersands are fine.