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 and vertical menus, to hamburger icons (which are a favorite with mobile navigation), lightbox menus, anchor links 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:
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:
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:
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:
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:
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:
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:
The forward-slash (/) that Chewy uses:
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.
Create your own eCommerce website and find more on web design tutorials here.