Breadcrumb
A secondary navigation trail showing the user's current location within the site's hierarchy.
Plain English
Breadcrumbs show the path from the homepage to the current page — Home › Blog › Design Tips. They help users understand where they are in a deep hierarchy and backtrack by one or more levels without using the browser Back button. They are most valuable on sites with 3+ levels of hierarchy (e-commerce categories, documentation, dashboards) and are largely redundant on flat sites with only 2 levels.
Technical
Semantic HTML: <nav aria-label="Breadcrumb"><ol> with <li> items separated by visual dividers. Use aria-current="page" on the last item. The last item (current page) is typically not a link. Separator: CSS content on ::before or ::after pseudo-element, or a › / / character in span. Structured data: use JSON-LD BreadcrumbList for SEO. CSS: inline-flex, gap between items, muted text for ancestors, full-weight for current, truncation on very long paths.
Live Demo
Standard
With accent current page
Mobile collapse (truncated)
Intermediate steps hidden on small screens
Breadcrumbs replace the back button on desktop. Show current location in the hierarchy.
Usage
✓ Good usage
Home › Products › Electronics › Laptops on a product category page — users can jump back to any parent category with one click.
✗ Bad usage
A breadcrumb on a 2-level site (Home › About) — adds no value when users can navigate in one click from anywhere.
Recommended values
- Font: 13-14px, muted colour for ancestors
- Current page: ink-900 or bold, no link
- Separator: ›, /, or > in ink-400
- Max items visible: 3-4 (collapse middle items on deep hierarchies)
- Use on 3+ level hierarchies only
Common mistakes
- Making the current page item a link — it points to where you already are.
- Using breadcrumbs on flat sites with no hierarchical depth.
- Breadcrumbs that do not match the URL structure.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Breadcrumb: <nav aria-label="Breadcrumb"><ol> with flex layout, 13px font, ink-500 text for ancestors (linked), ink-900 for current (not linked). Separator: › in ink-300 with 8px horizontal margin. aria-current="page" on current item.