Have you ever lost your phone, keys, or wallet? If so, you’ve probably been advised to retrace your steps. Breadcrumb navigation helps visitors to your site do just that, but instead of searching the kitchen, bathroom, and front door area only to find their keys in the refrigerator, breadcrumb navigation shows users their current location and the steps taken to get there.
Breadcrumb navigation gets its name from the fairy tale Hansel and Gretel, where the brother and sister duo leave a trail of breadcrumbs behind them as they traverse the forest in order to show their return path home. Effectively implemented breadcrumb navigation on your website will ensure that your visitors never get lost in the woods.
What is breadcrumb navigation?
Breadcrumbs are a navigational aid that allows users to keep track of their current location on a website or interface. A breadcrumb trail displays the page a user is currently on and its relation to the pages they visited before it, or the hierarchy of higher level parent pages above the current page. Breadcrumb navigation provides the user with ability to quickly navigate back to their starting point or earlier pages from their visit.
Breadcrumbs are typically displayed as a horizontal list of hyperlinked website pages separated by a greater-than sign (>). Breadcrumbs navigation is often situated near the top of the page somewhere underneath the main website navigation. Before we move on to tips and best practices, it is important to note that breadcrumbs come in a few different flavors.
Types of Breadcrumb Navigation
Location or Hierarchy Based Breadcrumbs
Location or Hierarchy based breadcrumb navigation is the type you’ll come across most often. A location based breadcrumb shows the user the current page they are on and its relation to the website’s hierarchy above it. Think of it like the folders where you store documents on your computer. The first folder is the most broad and each folder within gets more specific until you arrive at your document.
In the above example, the breadcrumb shows the current page the user is on, and each successive parent page leading back home to the Knowledge Base. Hierarchy based breadcrumb navigation makes it easy for the user to get back to the main page or any of the parent pages above where the current page is located.
Path or History Based Breadcrumbs
Path based breadcrumb navigation represents the unique path a user took before arriving on the current page. Although the path is not typically displayed in its entirety, path based breadcrumbs are often implemented as a form of back button, which brings the user to the previous page of their visit.
The above example shows the ‘Back to Results’ link on Bloomingdale’s website, which is a path based breadcrumb that allows the user to navigate back to their previous page with their unique query intact. History based breadcrumbs are common on eCommerce sites with many different categories and varieties of items to search through.
Attribute Based Breadcrumbs
Attribute based breadcrumbs display the attributes or tags a user has selected in order to filter their search on a webpage. Attribute based breadcrumbs are useful on eCommerce websites where users can select different attributes to narrow down the items on a page and find that perfect pair of jeans, for example.
Attribute based breadcrumbs can also be implemented as tags for categorizing blog posts and types of content.
Now that we’ve covered the different varieties of breadcrumb navigation, let’s move on to 9 tips for implementing breadcrumb navigation on your site to improve site navigability and reduce bounce rate.
Breadcrumb Navigation Tips and Examples
1. Only use breadcrumb navigation if it makes sense for your site’s structure.
Breadcrumb navigation is only appropriate if your site’s structure necessitates it. If you have lower-level pages that are accessible from multiple different landing pages, using breadcrumb navigation could confuse readers who access the same pages from different starting points. Additionally, breadcrumb navigation might not be necessary at all if you have a small website with only a few top level pages.
2. Don’t make your breadcrumb navigation too large.
Breadcrumb navigation is secondary to your website’s main navigation. Best practice is for your breadcrumbs to appear smaller than and somewhere below your site’s main navigation. If your breadcrumbs appear too large, it could mess with visual balance of the page and cause confusion when navigating the site.
In Oxo’s example, it is clear that the breadcrumb trail is secondary to the site’s main navigation bar above it. The gray bar where the breadcrumb navigation lives is a nice touch as well.
3. Include the full navigational path in your breadcrumb navigation.
If you leave out certain levels, you’ll confuse users and the breadcrumb path won’t feel as helpful. Even if users didn’t begin on the home page, you want to give them an easy way to explore your site from the beginning.
4. Progress from highest level to lowest.
5. Keep your breadcrumb titles consistent with your page titles.
Sony also does a good job differentiating links from non-links. The links are underlined, while the non-links like the current “Environment” page remain undecorated.
6. Get creative with design.
Breadcrumb navigation is traditionally styled as a horizontal list of links separated by a greater-than sign (>) However, you don’t need to follow the traditional path if a different design is more consistent with your site’s look and feel.
7. Keep it clean and uncluttered.
Your breadcrumb navigation is an aid to the user and should’t draw unneeded attention unless the user is looking for it. For this reason, you don’t want to clutter your breadcrumb navigation with unnecessary text or clunky design.
8. Consider which type of breadcrumb navigation makes the most sense for your site.
As discussed at the beginning of the article, there are a few types of breadcrumbs to consider — location-based, attribute-based, and history-based breadcrumbs. Location-based breadcrumbs show the user where they are in the site’s hierarchy. Attribute-based breadcrumbs show users which categories or tags their page falls under. Finally, history-based breadcrumbs show users the specific path they took to arrive at the current page.
When deciding what type of breadcrumb navigation is most appropriate for your website, you should consider your site’s structure, the type products or services you offer, and the manner in which you expect users to interact with your pages.
9. Know your audience.
Breadcrumb Navigation in HTML and CSS
Not only are breadcrumbs useful — they’re also easy to add to your website with a bit of HTML and CSS code.
Let’s start with the HTML, which we’ll use to make the links themselves. The easiest way to do this is to organize your links in an unordered list (<ul>) element, with each list item (<li>) comprising a link in the breadcrumb series until the final item, which denotes the current page.
Here’s an HTML template for breadcrumbs that you can use:
Notice how I’ve also enclosed the unordered list in an HTML <nav> (navigation) element, and added a class and an ARIA label to its opening tag. This is optional, but helps make your page more accessible to screen readers and search engines.
Breadcrumb Navigation in Bootstrap CSS
Bootstrap CSS also offers a way to create breadcrumbs without needing to add custom CSS. To do this, use the Breadcrumb component like so. Here’s an example from the Bootstrap 5 documentation:
This is just the basics of breadcrumb navigation in Bootstrap — see the Bootstrap breadcrumb documentation to learn all the details.
Design to Help Users Navigate Your Site
Editor’s note: This post was originally published in September 2018 and has been updated for comprehensiveness.