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.
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)
Further reading