Breadcrumb
/BRED-krum/ · noun · NAV pattern · #049
The trail of where you are: every ancestor is a link, the current page is plain text. If users never go deep, don't scatter crumbs.
You might call it
- “the Home › Category › Page links at the top”
- “the path links above the page title”
- “the trail of links showing where you are”
- “the little links separated by arrows”
- “the site navigation trail”
…its name is Breadcrumb.
Common questions
What is breadcrumb navigation?
A row of links such as Home › Category › Page that shows where the current page sits in the site’s hierarchy and lets people jump back up a level. It is secondary navigation: it supports the main menu, never replaces it.
In code
| iOS / Android / Flutter | No breadcrumb component — mobile apps use the back button in the navigation bar instead |
|---|---|
| Web (HTML / ARIA) | <nav aria-label="Breadcrumb"> <ol> aria-current="page" |
| Structured data (schema.org) | BreadcrumbList |
Prompt for your AI coding tool
Add a breadcrumb above the page title: the path from the home page to this page as links separated by “›”, ending with the current page as plain text, not a link. Wrap it in <nav aria-label="Breadcrumb"> around an ordered list, mark the last item aria-current="page", collapse the middle levels on small screens, and add matching BreadcrumbList structured data.
More UI words to use when vibe coding →