What is breadcrumb?
Quick definition
A navigational aid showing the user's hierarchical path through a website or application, typically displayed as linked text separated by symbols like '>' or '/'.
Breadcrumbs are a UI pattern that displays the user's current location within a hierarchical structure, helping them understand their position and navigate back to parent pages. They appear as a horizontal trail of links or text, often starting from the root or home level and progressing through nested sections to the current page. The name derives from the Hansel and Gretel fairy tale, where characters left breadcrumbs to trace their path back home.
In web applications and development tools, breadcrumbs serve multiple purposes: they improve usability by providing clear navigation context, reduce clicks needed to return to parent sections, and support search engine optimization through structured HTML markup. Breadcrumbs are particularly valuable in documentation sites, e-commerce platforms, and complex applications with deep hierarchies. Modern implementations often include breadcrumb schema markup (structured data) to help search engines understand site structure and display enhanced search results.
For developers, breadcrumbs are typically implemented as a component that accepts a list of path segments with corresponding URLs. They work best in conjunction with other navigation elements and should always include the current page, either as non-linked text or as a disabled state, to complete the user's mental model of their location.
Example
How it shows up in practice
Home > Projects > Active Tasks > Sprint Planning shows a user's path from the home page through project listings to the current sprint planning view.
Frequently asked questions
Are breadcrumbs required for all websites?
No. Breadcrumbs are most useful for sites with deep hierarchies like e-commerce, documentation, or complex applications. Simple, flat-structure sites may not benefit from them.
Should breadcrumbs include the current page as a link?
Best practice is to show the current page as non-linked text or disabled state. This prevents unnecessary self-referencing and clarifies the user's exact position.
How do breadcrumbs improve SEO?
Breadcrumb schema markup helps search engines understand site structure and hierarchies. This can enable rich snippets in search results and improve crawlability.
What's the difference between breadcrumbs and pagination?
Breadcrumbs show hierarchical location within a structure, while pagination moves between sequential pages of the same content type.