SYSTEM

Breadcrumb

Labels separated by a muted slash.

Navigation shadcn: Breadcrumb

States

    1. Work
    2. Grainger

    At rest

    nothing set

    Ancestors on dithered hairlines; the current page plain.

    1. Work
    2. Grainger

    An ancestor hot

    hover or :focus-visible

    Its hairline develops in --state.

Anatomy

Voice the label voice throughout: 11/16, uppercase, 0.08em
Ancestors links in ink on a dithered hairline
Separator a slash in --muted-foreground, half a module either side
Current aria-current="page": plain ink, no hairline, not a link
Hover a flare under the pointer (280ms) and the hairline develops in --state in 140ms; the text turns --state

Timings are read from the engine at build time (rule.ts).

Decisions

  • No fill for current

    The page you are on is plain ink rather than a --state fill: in a trail it is the end of the line, not a choice you can make again.

  • The link grammar

    Ancestors use the same dithered hairline as every link and text button, so nothing new is learned to read them.