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.
When to use it
- Deep documentation
- Product category hierarchy
- File or folder path
- A detail page several levels below the start
When NOT to use it
- Use it as a record of every page the user visited
- Show it on a one-level site
- Make the current item look like another link
- Replace the main page title with a breadcrumb
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