Breadcrumbs
UI ComponentsA secondary navigation aid showing the user's location within the site hierarchy, typically displayed as a horizontal trail of links separated by arrows or slashes.
Visual Examples
Example 1
Example 2
Example 3
Visual examples for Breadcrumbs coming soon.
How It Works in Apps/Websites
Breadcrumbs show the path from the homepage to the current page, with each level being a clickable link. They help users understand where they are and navigate up the hierarchy. Format: Home > Category > Subcategory > Current Page. The current page is usually not clickable. Essential for deep site structures.
How AI Interprets This Term
When you say 'breadcrumbs', AI expects: horizontal text navigation showing hierarchy, with '>' or '/' separators between items. All items except last are clickable links. Usually placed below header, above page title. Text is typically smaller (12-14px) and muted color.
Prompt Examples
Copy-paste these prompts to use in your AI tools.
Add breadcrumb navigation showing Home > Products > Shoes
Design breadcrumbs: horizontal with '>' separator icons, home icon for first item, text links in gray (#6b7280) that turn blue on hover. Current page (last item) in darker gray, not clickable. Positioned 16px below header.
Show breadcrumbs with text separators (/) vs icon separators (chevron) vs with home icon
Compare With
Related or contrasting terms to help you understand the differences.
Variants & States
Variants
States
Usage Guidelines
When to Use
- •E-commerce product pages
- •Documentation sites
- •Deep site hierarchies (3+ levels)
- •Content-heavy websites
When NOT to Use
- •Flat site structures
- •Single-page applications
- •Landing pages
Related Terms
Navbar
A horizontal navigation bar typically placed at the top of a page, containing the logo, main navigation links, and often search or user account controls.
Pagination
A navigation pattern that divides content into discrete pages, allowing users to move between pages using numbered links or prev/next buttons.