UI components · Navigation
Breadcrumb
Also called: Breadcrumbs, Breadcrumb trail, Breadcrumb navigation
A single line showing where the current page sits in the site's hierarchy, like "Home / Products / Details." Click an earlier level to go back up.
Click “Labeled” to see what each part is called.
How to tell AI
Swap in your own content firstAt the top of the content area, above the page title, add a breadcrumb that shows "Home / Orders / Order details." The first two levels are clickable gray links that darken and get an underline on hover. The last level is the current page, in dark text and not clickable. When there are more than 4 levels, collapse the middle ones into an ellipsis.
Send to
01Decide
Does your content look like this?
Check both columns to confirm Breadcrumb is what you need.
Use Breadcrumb when
- Sites with three or more page levels, where users need to know which category the current page belongs to
- When users often land on deep pages from search or external links and need one click to go up a level
- Detail and edit pages in admin systems, where users need to get back to the parent list quickly
Pick something else when
Sites with only one or two page levels, where the breadcrumb just repeats the page title
Showing progress through a flow like sign-up or checkout
Use insteadStepsAs the site's only navigation, since it can't list sibling sections
Not sure? Upload a screenshot and page analysis will check which layout each block should use.
02Pitfalls
Common misuse
It looks like it works, but it makes things harder for users.
- 01
Making the last item (the current page) a clickable link that just reloads the page
- 02
Using a breadcrumb to show progress through a multi-step form, mixing up page hierarchy with a task flow
- 03
Hard-coding the path as fixed text that doesn't change with the actual page level
03Spot it
How to spot it
Look at the overall structure first, then check a few features you can spot at a glance.
Structure
A series of links ordered by level, with separators (slashes or arrows) between them. The last item is plain text for the current page.
PartsClick one to highlight it in the wireframe above
04Explained
In detail
A breadcrumb is a row of links separated by slashes or arrows, running from the home page to the current page, like "Home / Orders / Order details." Every earlier level can be clicked to jump straight back. The last level is the current page, shown as plain text that can't be clicked.
It only answers "where am I, and what's one level up." It doesn't list every section, so it's always used with a navbar or sidebar menu, placed at the top of the content area above the page title. It's not much use on sites with only one or two levels.
Breadcrumbs look a bit like steps, since both are a row of text connected by arrows. The difference is that a breadcrumb shows a page's position in the hierarchy, while steps show how far along you are in a process. One can't stand in for the other.
Developer infoTerm ID, DOM cues, match priority
- Term ID
component-breadcrumb- DOM selectors
The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).
nav[aria-label*="breadcrumb" i]ol[itemtype*="BreadcrumbList"].breadcrumb.ant-breadcrumb.el-breadcrumb[class*="MuiBreadcrumbs-root"].arco-breadcrumb.t-breadcrumb.n-breadcrumb[data-slot="breadcrumb"]
- Priority
- 2 · when several match at the same level, the higher priority wins
- Version
- v2 · updated Sep 29, 2026