Musecomm
Back to Learning Capsules

Breadcrumbs in UX design

Learn why users and search engines love breadcrumb trails

Breadcrumbs in web design are often ignored, being a secondary navigation tool. But they can improve the user experience and benefit your website in more ways than one.

Read on for a crash course in breadcrumb navigation.

What are breadcrumbs?

  • Text path normally found towards the top of a web page
  • Serves as a secondary navigation bar for website visitors
  • Horizontal links are usually separated by angle brackets
  • Quick reference for users to know their current location

3 types of breadcrumbs in web design

  • Location-based: Represent the site structure/ hierarchy and number of steps to return to the homepage
    Home > Blog > Category > Post
  • Attribute-based: Typically used in ecommerce sites with relation to product attributes
    Home > Product Category > Attribute 1 > Attribute 2
  • History-based: Structured according to the user’s browsing history/ pages visited on the site
    Home > Previous Page 1 > Previous Page 2 > Current Page

3 reasons why breadcrumbs are important

  • Enhances user experience: Familiar interface element that makes website navigation more seamless
  • Improves site ranking: Context for Google to categorize information, display site structure in search results
  • Reduces bounce rate: Useful guide to other parts of the website if landing page doesn’t meet the user’s need

5 best practices when implementing breadcrumbs

  • Use breadcrumbs if you're looking for an SEO advantage
  • Ensure they are less prominent than your primary navigation bar
  • Follow a left-to-right design, with homepage at the left and current page at the right
  • Maintain consistency in breadcrumb & page titles, especially when using keywords
  • Avoid including a link to the current page (only text, not clickable) in the breadcrumb

Our
handpicked quote

"All that breadcrumbs do is make it easier for users to move around the site, assuming its content and overall structure make sense. That's sufficient contribution for something that takes up only one line in the design."

Jakob Nielsen

Co-Founder, Nielsen Norman Group

For strategic web design and development tailored to your marketing goals, click here.

Touchbase