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.
Anatomy — every part, named
- 1Breadcrumb separator
aria-hidden="true"“The little slash or chevron between page names” is the breadcrumb separator.
- 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.
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 |