AudioEye : The Role of Breadcrumbs in Web Design & UX

AudioEye : The Role of Breadcrumbs in Web Design & UX

Summary: Breadcrumbs are important in website navigation, SEO, and user experience. Developers use breadcrumbs to map where a page lives on a website. Here is what you need to know about breadcrumbs and their role in web design.

A website can be its own vast world made up of hundreds or even thousands of separate pages, and the bigger the site, the easier it is to get lost in it. When site visitors can’t figure out where they are within a site’s architecture and can’t navigate options, they are likely to get frustrated and leave.

To combat this frustration and bouncing, web developers use a set of common standard practices. First, most websites with layered hierarchies (categories, subcategories, parents and children) have a main navigation system like the menu items at the top of a site. Second, many websites use breadcrumbs, which map out where a given page lives within the site.

While breadcrumbs on websites are almost exclusively used as secondary navigation, they play a significant role in your site’s usability and search engine optimization (SEO).

What Are Breadcrumbs?

Breadcrumbs are a website navigational scheme that displays what page a user is currently on and the path that leads to said page. Think about someone being lost in a thick forest. Had they left a trail of breadcrumbs behind them, they would have a path back to where they started.

There are some standard practices for breadcrumbs and user experience (UX). Typically, breadcrumbs are placed toward the top of a page, somewhere below the main navigation bar and above the title (h1). Breadcrumbs are usually in a smaller font size so that they are unobtrusive and do not get confused with the main navigation. They are also typically written out in one line from left to right with the current page on the very end and a “>” symbol between each page. The full title of each page in the breadcrumbs should be listed.

How Breadcrumbs Are Used to Navigate a Website

Navigation with breadcrumbs depends largely on how website developers use breadcrumbs. For the most part, breadcrumbs allow users to navigate to other pages or sections that are closely related to the page they are currently on, or back to pages that led them there. Breadcrumbs can help a user get to pages more relevant to them without having to comb through the site’s main navigation, which often includes other sections of the site that aren’t relevant to the user.

There are three types of navigational breadcrumbs:

  • Location-based
  • Attribute-based
  • Path-based

Location-based Breadcrumb Navigation

Location-based breadcrumbs show you what page you are on and where it lives within the hierarchy of the site. For example, if you are looking to make dinner and you’re on a site’s recipe for spaghetti carbonara, you might see the following breadcrumbs:

Home>Food>Recipes>Italian>How to Make Authentic Spaghetti Carbonara

The article “How to Make Authentic Spaghetti Carbonara” lives in the Italian subcategory of the Recipes subcategory of

Read More