Breadcrumbs are a navigation aid that shows users their current location within a website’s structure. Named after the Hansel and Gretel fairy tale, they leave a “trail” showing the path from the homepage to the current page.
How Breadcrumbs Work
A typical breadcrumb trail looks like this: Home > Services > Web Design > Landing Pages
Each item is clickable, allowing users to jump back to any previous level without using the browser’s back button or main navigation.
Types of Breadcrumbs
Hierarchy-based breadcrumbs show the site structure (most common). Attribute-based breadcrumbs show page properties, often used in e-commerce (Category > Colour > Size). History-based breadcrumbs show the pages a user has visited, similar to browser history.
Benefits for Users
Breadcrumbs improve website usability by providing context. Users always know where they are within your site structure. They reduce the number of clicks needed to return to higher-level pages. This is especially valuable on large websites with deep page hierarchies.
SEO Advantages
Search engines use breadcrumbs to understand site structure and relationships between pages. Google often displays breadcrumbs in search results instead of the full URL, making your listings more informative and clickable. Structured data markup for breadcrumbs can enhance this further.
When to Use Breadcrumbs
Breadcrumbs are most valuable on websites with clear hierarchical structures and multiple levels. They’re less useful on simple one-page sites or websites with flat structures. E-commerce sites, documentation sites, and large corporate websites benefit most from breadcrumb navigation.
Design Best Practices
Place breadcrumbs near the top of the page, typically above the main heading. Keep them small and unobtrusive, they’re secondary navigation. Use clear separators (>, /, →) between items. Make all items except the current page clickable. Consider hiding them on mobile to save space.