Breadcrumb | Sodium design system

Content

When to use it

6 rules

Must: Mark a name a person gave a thing (a pipeline, a table, a run ID) as a value, so it reads in mono as written. Because the label role capitalises, and INGEST-EVENTS is not the pipeline's name; a value is compared by its characters.
Must: End with the current page as BreadcrumbPage, not a link. Because a link to the page you are on goes nowhere, and aria-current="page" tells a screen reader where you are.
Should: Build the trail from data with BreadcrumbTrail. Because it folds the middle into a menu and truncates the page when the row runs out, so it never wraps.
Never: Replace the slash with a chevron or an arrow. Because a trail of places in a data tool is a path, and a chevron reads as "next step".
Never: Use the breadcrumb as the page title. Because it is navigation; the page still needs its one h1.
Should: Pass renderLink for a router's Link. Because every crumb then navigates without a full reload.

4 checks

: A nav named "Breadcrumb" holding an ordered list; the current page has aria-current="page".
: Separators are hidden from screen readers.
: A cut value keeps its whole text as the accessible name.
: Links are text-2 at 7.8:1 and turn text-1 with an underline under the pointer.

2 keys

4 edge cases

Phone, 390 wide: Middle crumbs fold into the More menu first, then the page truncates.
A long run ID: Cut in the middle with its prefix kept: run_8f2a…e5b6a7.
One level: Only the page shows, and truncates if it must.
Right to left: The trail runs right to left; the slash stays a slash.

5 props

8 tokens