The trail back to home — the ⋯ stands for the collapsed middle of a deep path
Breadcrumbs
/ <nav> · aria-label="Breadcrumb" /
also called breadcrumb trail, path navigation, hierarchy trail
Breadcrumbs show the current page's position in a hierarchy and offer direct links back to its ancestors. The final item is the current location rather than a link, and separators are decorative. Deep paths may collapse middle levels into an ellipsis without hiding the root or current page.
If you called it…
…you meant a breadcrumbs.
Anatomy — every part, named
- 2Current-page crumb
aria-current="page"“The last page name that is not a link” is the current-page crumb.
- 3Collapsed ancestors
BreadcrumbEllipsis“The three dots hiding the middle of the path” are collapsed ancestors.
Prompt — paste into your agent
Add breadcrumbs inside a <nav aria-label="Breadcrumb">, linking each ancestor and marking the final item aria-current="page". Collapse low-value middle ancestors into an ellipsis when space is tight while keeping the current page visible.
Debug prompt — when it misbehaves
Paste this, then describe what you’re seeing — it hands your agent the classic failure modes to rule out first.
Debug my breadcrumbs (nav aria-label=breadcrumb, aria-current=page). Rule out: separators typed into the markup so screen readers announce every slash — draw them with CSS pseudo-elements; aria-current missing from the last crumb; long trails needing middle-crumb collapse instead of wrapping to two lines; the current page rendered as a link to itself. The symptom:
In code
The exact names this thing goes by in code — each row is one framework’s word for it. Use the row that matches your project (or paste it into your prompt).
| HTML | <nav> | |
| ARIA | aria-label="Breadcrumb" | |
| ARIA | aria-current="page" | |
| shadcn/ui | Breadcrumb |