Link
Printed type that goes somewhere. The words stay in ink and the rule under them is engraved into the plate: cut darker when you hover, deeper when you press.
Kit parts
Breadcrumb
The trail of levels above this page, printed across the top like the path an instrument shows over its menu screen: SETTINGS › BILLING › INVOICES. The levels above are in the second ink, the one you are on in full ink, with small engraved chevrons between. When the line is too short, the middle folds into a … key that opens a menu.
Seats open in 11 days. Want one email that morning?
Anatomy
The list is a flex line of printed labels. A ResizeObserver runs it again whenever the line changes width. The … key is a flat key that sinks into a well while its menu is out; the menu is the kit’s menu, hung from it.
Variants
- Two levels
- Folded · the middle in a menu
- data-max · past four levels
- This page as a link
- A long page name gives way
- Without the script · it wraps
States
- Rest
- Hover
- Focus
- This page
Props and options
| Name | Kind | Description |
|---|---|---|
| data-max | attribute | Fold any trail longer than this, whatever the width. |
| data-static | attribute | Leave it unwired: it wraps instead of folding, as it does without the script. |
| breadcrumbFold(widths, room) | function | The trail as markup, escaped; and which levels to fold for a line of that width. Pure. |
| wireBreadcrumb(nav) · foldBreadcrumb(nav) | function | Watch a trail added outside the page’s first load; fold one now. |
Usage notes
Tab along the trail; each level is a link. The narrow panel has no room for the whole path, so the middle is in the … key: Enter or ↓ opens it, ↑ ↓ move, Escape closes. Make the window narrower and the wide one folds too.
Accessibility
- The chevrons are drawn by CSS with no content, so they are never read out and never copied with the text.
- Folded levels leave the list and live in the … key’s menu, named “2 more levels”; the menu is the kit’s, with ↑ ↓ Home End, Escape and Tab.
- Nothing in it moves except the hover rule, which is instant with reduced motion.
Related parts
Menu
A card of actions and options that slides out from under its key. The key stays down while the card is out; an option that is on lights its lamp.
Pagination
Pages for tables and lists: numbered keys in a tray with the current page latched down, seven slots so the row never changes width. Compact, it is a transport with a track counter.