Breadcrumbs

What are Breadcrumbs?

Breadcrumbs are a secondary navigation element showing the path from the homepage to the current page. They appear as a trail of links, usually near the top of the page.

Example: Home > Products > Furniture > Chairs > Office Chairs

The name comes from the fairy tale where Hansel and Gretel dropped breadcrumbs to find their way home.

Types of Breadcrumbs

Location-Based

Shows where the page sits in the site hierarchy. Most common type. Example: Home > Services > Web Design > Portfolio

Path-Based

Shows the actual path the user took to reach the page. Less common because browser back buttons serve this purpose.

Attribute-Based

Shows the attributes selected to reach a page. Common in e-commerce filters. Example: Home > Shoes > Trainers > Nike > Size 10

Why Breadcrumbs Matter

For Users

• Understand where they are in your site
• Navigate up to parent categories quickly
• Reduce clicks needed to move around
• Provide context for the current page

For SEO

• Help search engines understand site structure
• Create internal links between pages
• Can appear in Google search results
• Distribute link equity through your site

Best Practices

• Place consistently at the top of content, below the main navigation
• Always include the homepage as the first link
• Don't link the current page (last item shouldn't be clickable)
• Use a separator like > or / between items
• Keep labels short but descriptive
• Add proper schema markup for SEO benefits