What Is A Breadcrumb Trail?

Date First Published: 26th August 2022

Topic: Web Design & Development

Subtopic: Web Design

Article Type: Computer Terms & Definitions

Difficulty Level: 5/10

Learn more about what a breadcrumb trail is in this article.

A breadcrumb trail, also known as breadcrumb navigation, or breadcrumbs, is a user interface element displayed outside the navigation bar that allows users to trace the directory path of the current page they are visiting. It displays a hierarchy of the current page in relation to the structure of the website. This helps users know how they arrived at that page, quickly jump to previous sections by clicking on the links, and be more aware of their location on a website. The term 'breadcrumb trail' comes from the Hansel and Gretel fairy tale where the two children dropped breadcrumbs to retrace their steps back to their home. In a similar way, a website breadcrumb trail traces the path back to the homepage of the website.

Example Of A Breadcrumb Trail

Below is an example of a breadcrumb trail. This is the breadcrumb trail for this article, which indicates that this page is three sections deep into this website. This breadcrumb trail is made up of horizontally arranged text links with the greater than symbol (>) used to separate the items and indicate hierarchy. It is progressed from the highest level to the lowest.

Some breadcrumb trails might also include the current page the user is on after the last link, but this is not required as it is already clear what page the user is visiting by looking at the title. Breadcrumb trails should always move in the right direction, with the highest level on the left and the lowest level on the right.

Do Websites Need A Breadcrumb Trail?

Websites that have hierarchically arranged pages with directories need a breadcrumb trail. An example of a website that would need a breacrumb trail is an elearning website that contains articles and quizzes designed to help people revise where a large number of articles and quizzes are organised into topics and subtopics. Small and single-level websites with no hierarchy, categorisation, or grouping do not need a breadcrumb trail. An example of a website that would not need a breadcrumb trail is a website with a single page as there would not be enough pages to create a hierarchy.

Breadcrumb trails should not be implemented on a website when there is no benefit. An example of this is when there are already lots of other navigation options, causing users to become overwhelmed with too many navigation options. Also, they should not be used as primary navigation or replace a top navigation bar.

Benefits Of Using A Breadcrumb Trail

In web design, breadcrumb trails have a lot of benefits, including:

• Improved user experience - Breadcrumb trails make it easier for users to find what they are looking for and improve site navigation. They give users a secondary method of navigating a website, allowing them to navigate to higher-level directories more quickly, encourage them to visit other pages of a website, and provide users with related links. Instead of a user clicking the back button on their browser to return to a higher level page, they can use the breadcrumb trail, reducing the number of clicks.
• Reduced bounce rate - Breadcrumb trails can encourage users to stay on a website longer and visit more than one page. For example, if a user lands on a website by clicking on a link in a search engine, a breadcrumb trail can guide them to higher-level pages to view similar topics of interest and other sections if they did not find what they were looking for instead of leaving the page.
• They are good for SEO as they can help search engine bots identify the content better, placing it in more relevant search results and matching the search query better.
• They are small and don't take up much space - This user interface element is horizontal and in small font, meaning that it can provide a useful method of navigating a website without overloading the page and making it load slower. They usually don't distract users from the page title or the main navigation.

Types Of Breadcrumb Trails

Breadcrumb trails come in various different types, including:

• Location-based - These are static and show users where they are in the hierarchy of a website, helping them understand the outline of websites. Computerhelp4all uses a location-based breadcrumb trail above the title.
• Attribute-based - These display the attributes of a certain page and give information that categorises it. These types of breadcrumbs are useful for ecommerce websites when users search for information and narrow the filters by attribute. The breadcrumb is often created for the user's session and may only temporarily exist.
• Path-based - These are dynamic and show users the steps they've taken to reach the current page. It is similar to browser history as it shows the pages that a user has visited on a website before arriving at the current page.