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.

Quick checkChoose the best answer

Someone is on Projects / Summer campaign / Data report and needs to understand the hierarchy and return to Projects. What should be shown?

Show 'Step 3' and mark the previous two pages as completedShow 'Projects / Summer campaign / Data report' with linked parent levelsList the last three visited pages in reverse chronological order

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 documentation
Home/Components/Navigation/Breadcrumbs
Product category hierarchy
Component library/Navigation/BreadcrumbsClick “Navigation” to return directly to the parent level
File or folder path
Drive/Design team/2026 redesign/Home.sketch
A detail page several levels below the start
Workspace/Projects/Website redesign/Tasks/Details

When NOT to use it

Use it as a record of every page the user visited
Home/Settings
Show it on a one-level site
Enter information/Confirm order/Complete paymentThese are steps, not a path
Make the current item look like another link
Home/Product/Business/Solutions/Retail/Customer stories/Case studySeven levels without truncation won’t fit on one line
Replace the main page title with a breadcrumb
Home/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

Homepage/Digital Video/Headphones/Wireless Noise Canceling Headphones Pro

🎧

Shengkuo Q45 Noise Canceling Headphones

¥ 899 ¥ 1,299

Online store category

☁ My Drive/Design Team/2026 Website Refresh

📁 01 Requirements12 files

📁 02 Visual Designs8 files

🖼 Homepage-banner-v3.png2.4 MB

File browser

Workspace/Users/User profile

Lin Xiaobu

ID 10247 · Registered on 2025-11-03

Active

Total orders

Last login

2 hours ago

Admin detail page

Help Center/Account and Security/How to reset your login password

How to reset login password?

Updated on 2026-06-18 · About 3 minutes to read

👍 Helpful (214) 👎 Not helpful (6)

Want GPT or Codex?VibeHubGPT support

GPT-6 Astra

Build in 3D. Put your computer to work.