A Beginner’s Guide to Using Breadcrumb Navigation in Web Design


website featuring softdrink with breadcrumb navigation at top of homepage

Navigation plays a critical role in the success of a website design, impacting how easily visitors find the information they’re looking for, and overall ease-of-use. These days, there are many types of website navigation to suit your site’s aesthetic and practical needs—from traditional horizontal menus, to hamburger icons (which are a favorite on great mobile websites), lightbox menus, and more.

Today we’re not going to talk about a navigation menu per say, but rather a unique and handy UX design element that many brands, businesses and personal website owners are implementing onto their websites: breadcrumbs.

Breadcrumb navigation, when paired with an organized and visually appealing website menu, can boost the effectiveness of your design by guiding visitors through your online content. In this article, we’ll discuss what breadcrumb navigation is, in what cases it will benefit a website and the best practices for adding them to your own design.

What is breadcrumb navigation?

Breadcrumb navigation is a secondary navigation located at the top of a web page, just beneath the header. Similar to the breadcrumbs Hansel and Gretel used in the fairy tale, this digital trail of text links helps users find their bearings, retrace their steps, and identify shortcuts.

When should you add breadcrumbs to your site?

When you create a website, you should always include primary navigation for top-level pages and categories, usually in the header.

Even if you build a single-page site, primary navigation links and website menus acquaint visitors with your site’s content—enabling them to find sections. You don’t always need breadcrumb navigation, but it can benefit your user experience.

You may add breadcrumb navigation to your website for these common reasons:

Your navigation is deeper than two layers

If you can fit all categories and sub-categories into the main navigation without overcrowding, then you don’t need a breadcrumb navigation. Think of breadcrumbs as a space to handle deeper navigation layers—such as sub-categories, product filters and so on.

You launch a site with major growth potential

Even if you don’t launch your website with much content, you’ll likely add more over time. If create one of these sites, you should build breadcrumbs in right from the start:

  • eCommerce

  • Content (e.g. blogs, magazines, newspapers)

  • SaaS

  • Any site including a support center or knowledge base

Your pages don’t have sidebar links or an internal linking system

If you share relevant links or categories on your internal pages, then you might not want to take up additional space with a breadcrumb navigation. For instance, your blog readers may find it valuable to find top-level categories on the sidebar dropdown menu. They also may simply like to see relevant links at the end of articles.

Types of breadcrumb navigation (with examples)

Websites generally use two types of breadcrumb navigations in UX design:

01. Location-based breadcrumbs

Also known as hierarchy-based breadcrumbs, location-based breadcrumbs display a link trail, starting with the home page and ending at the current location.

Take a look at this breadcrumb navigation example from Target:

example of breadcrumb navigation on target website

The structure goes like this:

Target (home) / Shoes (category) / Kids’ Shoes (sub-category/current page)

The breadcrumbs let the visitor know that they’re looking at the Kids’ Shoes search results page and include the number of results (i.e. 828). While not a necessary detail, it’s a useful touch for large sites like Target.

Beyond eCommerce sites, sites with varied content can use this breadcrumb structure, too. Here’s an example from IKEA’s “Inspiration” area:

image screenshot of ikea website using breadcrumb navigation

The last item differs between these two structures: Target shows the search results page category while IKEA displays the current page name:

Home > Inspiration > A stately look for any era

The general structure is more or less the same. As users look from left to right, the categories narrow. This breadcrumb navigation style enables users to navigate or backtrack to upper level categories rather than start a search from scratch.

Visitors may find it helpful to see the categories and related sub-categories laid out this way. This breadcrumb navigation also gives them a better sense of the website’s offerings, inspiring them to go down a different path if their initial search wasn’t fruitful.

2. Attribute-based breadcrumbs

An attribute-based breadcrumb trail enables users to remove filters if the current results don’t give them the right products. This navigation still provides context as to the user’s site location and their current page view, but isn’t usually designed as a series of hierarchical links.

You commonly see these breadcrumbs laid out like this example on the Gaiam website:

screenshot image of breadcrumb navigation on yoga website

This breadcrumb navigation contains no links. Instead, we see the top-level category “YOGA MATS” (which is unlinked) and with the activated filters:

  • Standard

  • 5MM

  • Latex-free

  • 4-star & up

Bed, Bath & Beyond does something similar with its breadcrumbs:

screenshot of breadcrumb navigation on bed bath and beyond website

The retailer separates its breadcrumb navigation from its filter breadcrumbs. The breadcrumb navigation has two links at the top:

SHOP BY ROOM | BEDROOM

The filter breadcrumbs says “Sleep – Product Type: Comfort Set” and then lays out the activated filters in dismissible blocks beside it:

  • In Stock

  • Comforter Set

  • Queen

History-based breadcrumbs

There’s technically a third breadcrumb navigation type based on the user’s current session path: History-based breadcrumbs.

Websites don’t commonly use them as they are rarely practical. Customers likely compare various products when shopping at the retailer’s eCommerce store. First, they look at one brand’s product, then the same brand’s product in a different size or color. Then they’ll explore other brands.

In that one session, they might view 10 or more types of an individual product. If the site used a history-based breadcrumb navigation, it would be a mess. So, unless your users tend to take a linear path, a history-based navigation doesn’t make sense. It won’t help the users and it’ll look messy, too.

Benefits of using a breadcrumb navigation

In the Hansel and Gretel story, breadcrumbs were useful only to them, whereas with digital breadcrumbs—the website’s visitors and the brand reap the benefits:

Enhanced website usability

Even if you build a website with familiar patterns and intuitive interactions, the content mass and site complexity could still present an obstacle to some users. For this reason, you can commonly find breadcrumb navigation on websites these days.

Breadcrumb navigation enables you to design a lean website menu, moving the extra navigational details to the top of each web page. This small website component improves your users’ experience in big ways:

  • Make backtracking easier

  • Keep users from getting lost or overwhelmed

  • Introduce users to new sub-categories

  • Help them more clearly understand everything your brand does

As constrained space affects the user experience, breadcrumb navigation also improves mobile usability.

Reduced bounce rate

Breadcrumbs create a pain free navigation-experience as visitors don’t have to rely on the main navigation and their browser’s “Back” button. It also gives users tools to easily discover more content. When done right, it should result in improved visitors’ time-on-page metrics and decreased bounce rates.

Improve search ranking

Breadcrumbs help organize websites with lots of content or inventory. This organization makes it easier for search engines to learn a website’s purpose, index its content and recommend it for relevant searches.

Google even shows off a website’s breadcrumb navigation in search results.

Tips for using a breadcrumb navigation

In addition to adhering to website navigation tips, keep these other breadcrumb navigation creation tips in mind:

1. Put the breadcrumbs in the top-left corner

While it’s not a hard rule, a designer usually places breadcrumb navigation on a website’s top-left corner as familiar users instinctively look for them there. Plus, this spot naturally draws new users’ eyes.

2. Signify clickable text

When you design hyperlinks for your web pages, don’t set them up to look like plain text as it makes it nearly-impossible for visitors to recognize clickable text.

While users might assume they can click breadcrumbs, distinguish the non-clickable breadcrumb text from the clickable. CVS does this:

image of cvs website using breadcrumb navigation for eye care shopping

With Home, Shop, Personal Care, and Eye Care underlined, CVS shoppers will know which links will take them somewhere else. Also, with the final breadcrumb “Contact Solution” not underlined, they know they’re on this page and not a sub-category.

3. Use separators between breadcrumbs

Because a breadcrumbs trail is small, you can’t rely upon white space to make it clear where one breadcrumb begins and where one ends. Therefore, place a symbol in between each link.

Websites commonly use these two types:

The greater-than symbol (>) that Dollar Shave Club uses:

screenshot of dollar shave club website using breadcrumb navigation

The forward-slash (/) that Chewy uses:

screenshot of chewy website using breadcrumb navigation

While you’ll generally find these two styles on websites, any symbol that denotes hierarchy or a relationship (like an arrowhead) works. You might also add a brand-specific symbol, if you have one.

4. Be mindful of size

Breadcrumb navigation shouldn’t take up too much space on your web page. In fact, most designers make their breadcrumbs a pixel or two smaller than the rest of the on-page text so that it doesn’t distract from the main content.

That said, take note of the size. You want a font large enough for every visitor to read but not too big that it makes the breadcrumb trail too long. It should only take up a single line on the page.

5. Deal with breadcrumbs differently on mobile

A long breadcrumb trail won’t fit on a smartphone screen. And you don’t want to force your mobile breadcrumbs to wrap as it will push the main content down further on the page and frustrate the user.

You can have a user interface that remains clutter-free even while providing visitors a helpful secondary navigation system by limiting the number of default breadcrumb links on a mobile website, and adapting your design to fit a smaller screen.

By Jenna Romano

Web Design & UX Expert, Writer


www.wix.com

Leave a Reply

Your email address will not be published.