On this page
Overview
From the workspace to the open document.
Show code, DocumentTrail.tsx
Variants
Applications without addresses
Levels can be buttons rather than links.
- Pressing one shortens the trail.
- The application moves focus, here to the folder's title.
Show code, WithoutUrls.tsx
A level without a page
A level that can't be opened is plain text.
Show code, LevelWithoutPage.tsx
Wrapping
- Wraps
A trail above a page's content: it wraps onto more lines when it runs out of room. The default.
- One line
A bar that stays one line tall: the current page is cut short first.
Show code, WrappingTrail.tsx
Show code, OneLine.tsx
Anatomy
Trail
Level
Separator
Current page
Show code, BreadcrumbsAnatomy.tsx
Behaviour
Long labels
A long label ends with an ellipsis, and a tooltip shows it in full on hover and on keyboard focus.
- On one line, the current page is cut short first, and earlier levels keep their width.
Rules
The trail starts where people know the top to be, and names each level as they know it.
Use it when
- Seeing where you are in a hierarchy and going up, such as the folders above a document
- An item's place, on one line of a header or a bar beside its status and actions
Show code, RecognisedTop.tsx
Show code, AddressAsTrail.tsx
Names
Name each level as it is named elsewhere, and the current page as the page's heading.
Beside the navigation
Pair the trail with the main navigation: it never replaces it.
- A trail of one level shows nothing.
Accessibility
| Key | Action |
|---|---|
| Tab, Shift+Tab | Moves through the links and buttons; a plain level or the current page only when cut short. |
| Enter | Follows a link or presses a button. |
| Space | Presses a button. |