Breadcrumb
You might say
This page is buried pretty deep. Show where I am at the top, with links back up the path.
Show the path from a broad section to the current pageBreadcrumbs help people understand where a deeply nested page sits and let them move back to a parent level. They describe location, not browsing history. On shallow sites, a clear title and navigation are often enough.
You can say this to an AI Agent
Show Projects / Summer campaign / Data report breadcrumbs on the report page. Link parent levels and keep the current page as location text, not visit history. Open the report from different entry points and verify a stable path without narrow-screen overflow.
When to use it
- Deep documentationHome/Components/Navigation/Breadcrumbs
- Product category hierarchyComponent library/Navigation/BreadcrumbsClick “Navigation” to return directly to the parent level
- File or folder pathDrive/Design team/2026 redesign/Home.sketch
- A detail page several levels below the startWorkspace/Projects/Website redesign/Tasks/Details
When NOT to use it
- Use it as a record of every page the user visitedHome/Settings
- Show it on a one-level siteEnter information/Confirm order/Complete paymentThese are steps, not a path
- Make the current item look like another linkHome/Product/Business/Solutions/Retail/Customer stories/Case studySeven levels without truncation won’t fit on one line
- Replace the main page title with a breadcrumbHome/BreadcrumbsThe current page shouldn’t link to itself
Anatomy
A clickable ancestor link that returns to that level
Usually a slash or chevron, used only as a visual separator
Plain text for the current page; it is not clickable.
Variants
Basic
When there is a clear multi-level information hierarchy and it is necessary to go back to the previous level
With Icon
When the first-level entry needs to be distinguished from other path items
Separator
When the design system has defined a path separator style
Typical use cases
Documentation
🎧
Shengkuo Q45 Noise Canceling Headphones
¥ 899 ¥ 1,299
Online store category
📁 01 Requirements12 files
📁 02 Visual Designs8 files
🖼 Homepage-banner-v3.png2.4 MB
File browser
Admin detail page
How to reset login password?
Updated on 2026-06-18 · About 3 minutes to read
👍 Helpful (214) 👎 Not helpful (6)
Recommended tool
Web fine-tuning tool · Selector Pro
Select page elements for precise AI edits
Click a button, text, or card, note the change, then copy its exact location to AI.
Open Selector Pro website↗Further reading
Quick check