Breadcrumb
A trail showing where the current page sits in a hierarchy, and a way back up it.
UI ComponentsBreadcrumbs earn their space when a hierarchy is real and more than two levels deep — documentation, catalogues, file structures, nested records. They give orientation and a one-click route up, which matters most for people arriving from search who never saw the levels above. On a flat site they are decoration.
The trail must describe structure, not history. A breadcrumb that shows where the user came from is a back button with extra steps, and it breaks the moment two paths lead to the same page. Mark up the trail with `BreadcrumbList` structured data as well: Google renders it in place of the raw URL in results, which measurably affects click-through.
In practice
A documentation site added breadcrumbs with BreadcrumbList markup to about 200 deep pages. Search result snippets began showing the section path instead of a truncated URL. Click-through on those pages rose roughly 8% over two months with no change in average position.
Where teams get it wrong
- Breadcrumbs on a flat site, where they add a row and no information.
- Trails that reflect navigation history instead of structure.
- The current page rendered as a link to itself.
- No `BreadcrumbList` markup, giving up a free search-result improvement.
- Truncating the middle so the path becomes unreadable on mobile — collapse deliberately, with the parent always visible.
Learn more
You may ask
Frequently Asked Questions
Do breadcrumbs help SEO?
Yes, indirectly. With `BreadcrumbList` structured data, Google often shows the hierarchy instead of the URL in results, which tends to improve click-through. They also add internal links to parent pages.
Should breadcrumbs show history or hierarchy?
Hierarchy. A history trail duplicates the back button and becomes inconsistent as soon as two routes reach the same page.
Related terms
All terms- Sidebar NavigationA vertical navigation column that scales to real product structure — grouping, nesting and staying visible while you work.
- NavbarThe persistent top bar carrying a product's primary destinations, identity and account controls.
- Information ArchitectureThe structure of a product's content and navigation — how things are grouped, labelled and related so people can find what they need.
- SitemapA structured list of a site's pages and their hierarchy — used both as a design artefact and as an XML file that tells search engines what exists.
Defined by Mara Last reviewed .
Let's talk about your product.
Happy to look at what you're building and say where design would move the needle.
Contact Us