Breadcrumb Navigation
Definition
A breadcrumb is secondary navigation: it does not replace the main menu, it tells you your position within a hierarchy. The usual markup is an ordered list inside a nav element with an accessible label, because the list conveys the order and the label distinguishes this nav from the main one. The current page appears as the final item and is conventionally not a link, often marked with aria-current="page". Separators between items belong in CSS rather than in the text, so that a screen reader does not read out a chevron between every step. Three flavours exist: hierarchy-based, which reflects the site's actual URL structure and is the only reliable kind; attribute-based, common on shops filtering by facets; and history-based, which retraces the visitor's clicks and is usually more confusing than helpful.
Why It Matters
Breadcrumbs quietly solve the arriving-from-search problem. Most visitors land on an interior page rather than the home page, and without a trail they have no idea what else the site contains or what level they are on. They also feed internal linking: every page in a hierarchy gains a link back to each of its parents, which spreads discovery routes through the site without anyone hand-writing them. In Google's results, a BreadcrumbList marked up on the page replaces the raw URL in the listing with a readable path, which on a long address is the difference between a line of slashes and a legible trail. For orientation they matter most to people using screen magnification, who see only a fraction of the page at a time.
How It Works
Mark the trail up in HTML, then describe it in structured data with a BreadcrumbList containing a ListItem for each step, each carrying a position, a name and an item URL for every entry except the last. Google reads that, checks it against the visible trail, and if the two agree it may show the path in place of the URL. Where no markup exists, it often infers a trail from the URL structure anyway, which is one more argument for addresses that mirror the hierarchy. A trail that contradicts the site's actual structure is worse than none, since visitors navigate by it. Keep it shallow — beyond four or five levels it stops being a shortcut and becomes another thing to read.
Real-World Example
A knowledge base published as static files at hollis-docs.99helpers.site nests articles two levels deep, giving addresses like /guides/billing/refunds.html. Each article gains a one-line breadcrumb reading Home, Guides, Billing, Refunds, with the first three as links and matching BreadcrumbList markup. Visitors arriving on the refunds page from search can now see the billing section exists and click into it, instead of bouncing straight back to the results.
Common Mistakes
- ✕Linking the final item to the page it is already on — it looks like a route somewhere and goes nowhere
- ✕Putting the separators in the markup as text characters — screen readers then announce a slash or a chevron between every step
- ✕Building a history trail instead of a hierarchy trail — the path changes depending on how the visitor arrived, so it describes nothing stable
- ✕Marking up a BreadcrumbList that does not match the visible trail — the mismatch breaches structured data policy and may be dropped entirely
Related Terms
Internal Linking
Internal linking is the practice of linking from one page of a site to another page on the same site. It is how both readers and crawlers find their way past the home page.
Schema Markup
Schema markup is structured data added to a page using the schema.org vocabulary, stating in machine-readable form what the page is about — a product, an event, a person, a recipe.
URL Structure
URL structure is how the address of a page is put together — the words in the path, the separators between them, and how many levels deep the page sits.
Landmark Region
A landmark region is a section of a page with an announced role — banner, navigation, main, complementary, contentinfo — that a screen reader user can jump straight to instead of reading through everything above it.
URL Anatomy
URL anatomy is the set of parts a web address is built from: scheme, host, path, query string and fragment. Knowing which part is which explains most link problems in seconds.
Put a file online in seconds
Drop in a document, an image, a page or a whole static website and share the link — free, with no build step and no server to set up.
Host a file free →