Component · Navigation · 14
Breadcrumb
Breadcrumb = a slash-separated path showing where the current page sits, with the final item as plain text.
What is a Breadcrumb?
A breadcrumb shows where this page sits. Name the separator, which levels link, and how deep trails collapse.
Variants
Tap a property to highlight it in the preview.
- Name this type explicitly in the prompt.
- Name this type explicitly in the prompt.
- A field that leads with a glyph (search, calendar) inside the control.
- Give a value, not a vibe word.
- Give a value, not a vibe word.
- Give a value, not a vibe word.
- Give a value, not a vibe word.
- A button whose content is a single glyph with no text label. Always give it an aria-label.
States
Tap a property to highlight it in the preview.
- The resting, valid state of a field before any input or error.
- How the control reacts on pointer-over: lift, tint, or border change. Name it so the model does not guess.
- Say this state explicitly in the prompt.
Anatomy
These are the parts to name in your prompt.
- 01 Root link
- 02 Separator
- 03 Intermediate link
- 04 Current page
When to use
- Deep content hierarchies — docs, categories, folders
- E-commerce category trails
- Admin sections more than two levels deep
Avoid when
- The site is flat — the trail is just the page title
- The page already has tabs or a sidebar doing the same job
- Levels are generated from a URL that is not human-readable
The last crumb is the page you are on — make it text, not a link to itself.
See also
Create a breadcrumb component.
STYLE
- 13px links in #6E6E73, hover swaps to #1D1D1F with an underline
- a 13px #C7C7CC slash separator with 8px spacing on both sides
- the current page is plain #1D1D1F text, not a link
- a house icon stands in for the root level
STATES
- default, hover on the links, collapsed with a … button
TECHNICAL
- React
- Tailwind CSS
- shadcn/ui