Breadcrumb Navigation Design Best Practices (2026)
Breadcrumbs show where a page sits in the hierarchy. When they help, how to structure them, and when to skip them.
Shaheer Malik
Framer Designer & Developer
Quick answer
Use breadcrumbs when a site has genuine hierarchy more than two levels deep. Show the full path from home to the current page, make every level except the current one clickable, and never let breadcrumbs replace primary navigation — they orient users, they do not get them somewhere new.
A breadcrumb is a small trail that shows where the current page sits in a site's hierarchy, usually near the top. It helps people understand structure and jump back up quickly.
This guide covers when breadcrumbs help, how to structure them, and when to leave them out.
When to use breadcrumbs
Use breadcrumbs on sites with real depth, like e-commerce, documentation, or large content sites, where pages nest several levels down. On a flat site with a handful of pages, breadcrumbs add clutter without value, so a clear main navigation is enough.
How to structure a breadcrumb
- Show the path from the home page down to the current page.
- Make every level except the current page a link.
- Use a clear separator, and keep labels short and matching the page titles.
- Do not make the current page a link, but show it as the end of the trail.
Best practices
- Place breadcrumbs near the top, above the page title.
- Keep them on one line, and truncate gracefully if the path is long.
- Reflect the real site hierarchy, not the random path a user took.
- Add breadcrumb structured data so search engines can show the trail.
Accessibility
Mark the breadcrumb as a navigation landmark and indicate the current page so screen readers announce it correctly. Keep links keyboard reachable with clear focus. See accessibility.
Common mistakes
- Adding breadcrumbs to a flat site that does not need them.
- Making the current page a link, or every level not linked.
- Labels that do not match the actual page titles.
- Reflecting click history instead of the true hierarchy.
Want a polished, consistent UI?
Components like these add up to the whole product experience. I design and build clean, consistent interfaces for SaaS and AI startups, with a proper design system so every part stays in sync. See my UI/UX design services, browse case studies, or get a fixed quote in 24 hours.
Related reading
FAQ
Frequently asked questions
On deep sites like e-commerce or documentation where pages nest several levels. Flat sites usually do not need them.
Need this kind of work for your product?
I design and build websites, products, and brands for SaaS & AI startups — design and code under one roof.