Breadcrumb
面包屑
Aliases:面包屑导航路径导航层级路径位置导航首页大于分类那种路径网站路径条trail
What is it
A hierarchical path like "Home / Library / Page" that states where the user sits in the information architecture: every ancestor is a link back, and the last item marks the current page. The cheapest way to keep users oriented — the name comes from the breadcrumbs Hansel dropped to find his way home. Usually placed above the page title.
Interactive playground
Try it. Make an informed choice.Inspect ancestor navigation and compare short and deep paths.
Loading lab…
What to look for
- 01The last item indicates the current location and usually needs no link.
- 02Keep long paths within the narrow viewport.
✓ When to use
- Content sites deeper than two levels — docs, category trees
- Users land on deep pages from search or external links
- A cheap path to walk back level by level
✕ When not to use
- Flat single-level apps — it is pure noise
- Personalized feeds without a stable hierarchy
- Tight mobile screens with shallow levels — can be omitted
Variants
Text
文字型
Plain links + separator, the default
With icons
带图标
Home icon at the root, small icons per item
Truncated
截断型
Middle levels collapse into an expandable ellipsis
Implementation
flexwhite-space: nowrapoverflow: hiddentext-overflow: ellipsisBuild with nav[aria-label="Breadcrumb"] and an ordered list; render separators via CSS ::before or a dedicated span — never inside the link target. The last item is plain text with aria-current="page". For deep paths collapse middle levels into an expandable ellipsis and keep the container single-line with ellipsis overflow.
Platform API
<nav aria-label="Breadcrumb"><ol><li>Related concepts
A horizontal navigation bar pinned to the top of the page: brand on the left, primary links in the middle, search, actions and avatar on the right. It is the front door of a site — the 3–7 most important destinations compressed into one strip, folding into a hamburger menu on mobile. Usually kept visible with position: sticky.
ComponentsSimilarA vertical navigation area pinned to one side of the page (usually the left), carrying the primary hierarchy of a product. The de facto standard of admin systems: brand and global search on top, module tree in the sidebar, content focused on the task.
ComponentsSimilarA row of switchable labels that divide one region into mutually exclusive views: the tab headers stay visible and clickable, and only the active tab's panel shows while the rest stay hidden. Packs several tightly related contents into one area to switch in place instead of full-page navigation. Arrow-key navigation between tabs makes it a classic accessibility showcase.
ComponentsSimilarA page-numbered control that slices long result sets into discrete pages: users explicitly click a page number or prev / next to fetch that slice, so the current position is always known, shareable and reversible. The controlled counterpart to infinite scrolling's endless drift — the default for search results and admin tables.
ComponentsSimilarA temporary overlay listing actions, opened by click or right-click: flat or grouped command items that execute and close on selection. It houses infrequent actions (more, settings, delete), usually behind a "⋯" button or a context click.
ComponentsSimilar