Breadcrumbs are navigational aids that allow the user to monitor their current position. If you know the fairy tale "Hansel and Gretel," you'll remember that they found their way out of the dark forest (and away from the witch who wants to eat them) by dropping a path of breadcrumbs to follow.
These breadcrumbs are the same idea—users can find their way from one webpage to another through breadcrumb links. They're a type of secondary navigation, as opposed to your site's main navigation (also known as primary navigation), like the site menu on your main page.
Read on to find out what breadcrumbs do, learn how they help users navigate your website, and get some tips for the best way to use breadcrumbs to make your website easy for users to browse and go directly to the pages that are most relevant to them.
What is breadcrumb navigation?
There are many considerations that go into designing a website. For example, making sure your site has an attractive design, features your product or service prominently, and is secure for online payments.
But don't overlook your site's information architecture as well. If it's well designed, it ensures that everything on your website is easy to find and understand. For example, you want to make sure that users can go right to the purchase page rather than having to Google it. Using structured data—standardizing the way information is presented on your website—is important, and breadcrumb navigation can do that.
A trail of breadcrumbs helps a viewer understand where they are in your site's hierarchy and get to where they want to be. Breadcrumbs allow the user to see a trail back to all of the pages they came through to get to where they are now or to see where they are in the hierarchical structure of your site. Rather than using the "back" button to go to the previous page and the next previous page, they can use the breadcrumb navigation path to jump back directly from the current page or to any higher-level page in the structure.
Examples of breadcrumb navigation
While breadcrumbs can't replace the primary navigation of your website, they are a useful tool for enhancing your user experience.
You've almost certainly seen breadcrumb navigation, even if you didn't recognize it at the time. If you're shopping for a new pair of shoes, you may get to the page for a specific pair (either by navigating through the site or directly through a link in a search engine like Google) and see something like this at the top of the site:
Home page > products > shoes > women > athletic > running > brand name > style
In the above example, each item between the > symbol is called a breadcrumb. It allows the user to see the exact path they took to get to the current page or where they are on your website. Then if the shoes you're looking at aren't the right ones, you can link directly back to any earlier page and continue the search.
Breadcrumbs can also help if users are required to complete several actions. E-commerce websites, for example, may ask users to check out of a shopping cart first by entering shipping information, then payment, and then finally confirming the order. A site with breadcrumb navigation can display links back to each previous step so the user can make changes.
Why use breadcrumb navigation?
Why might you want to use breadcrumb navigation and what benefits can it provide to your site's users?
Easy site navigation
Breadcrumbs help a user see where they are in your site's structure and how they got there. They can reduce user anxiety about getting lost if they navigate to additional pages, and help them get their bearings if they’ve just landed on the page from somewhere external like Google. In addition, breadcrumb links allow users to jump easily from one place in your hierarchical structure to the next.
Encourages browsing
If users are confident that they can get back to any page they've seen before, they're able to explore and find exactly what they're looking for—or maybe something they didn't even know they needed until they find it. Breadcrumb navigation is particularly useful on e-commerce sites, where products can be arranged within categories, allowing users to look at individual items and easily link back to a broader category to keep browsing.
Improves searchability
Breadcrumbs were originally created to simplify navigation and are now used to influence several aspects of user interaction on the Web.
Google and other search engines use breadcrumb navigation to get more information about websites, which can make searches more accurate and make sure that results link to the most useful content.
Search results often take users directly to a page within your website's hierarchy rather than simply to your home page or landing page. For example, the results can link a potential customer directly from a Google search to an item's purchase page.
In addition, you may have seen search results on sites like Google that include more than just links to websites—they might also have a photo or a short bit of text taken from the target page itself. This is an example of "rich results", which are a lot more eye-catching than just a link. Breadcrumbs are one of the elements that help Google (or any other search engine) find and pull information to feature in its rich results, making users more likely to click through to your website.
Targeted keywords take users to the right page
You want a search result that brings users right to the information or product they're looking for. Using a breadcrumb trail will allow Google and other search engines to provide links directly to the most appropriate landing page—details about product attributes, for example—and then let users link directly back to higher-level pages to learn more about your brand. This also reduces your website's "bounce rate"—the number of users who leave your site after viewing only one page.
When not to use breadcrumb navigation
Even though breadcrumbs can be useful on many websites, there are a few reasons why they might not make sense for you.
Site design isn't hierarchical
If your website design is simple, only consists of a few pages, or doesn't have many sub-pages, it's a good bet that users can easily navigate your site without a navigational aid like breadcrumbs. In fact, including them may make it seem like your site is more complex than it actually is, turning some users off.
Extra coding work for little payoff
While breadcrumbs are common and not difficult to implement, they do require some work to create and maintain. If your website doesn't provide information in multiple categories or if there is another, easier way to navigate your site (such as buttons or links as part of the page itself) the extra effort might not be worth it.
Can confuse users
Sometimes the more text on the page, the more confusing it can be to a website visitor. Consider your site's audience and whether the presence of breadcrumbs will help or add unnecessary data to a website that works better with a simple, straightforward visual design.
Types of breadcrumb navigation
There are several types of breadcrumb navigation. Each one is appropriate for different sites. Learn about the different categories to see what might be right for your website.
Path- or history-based breadcrumbs
Path-based breadcrumbs, also known as history-based breadcrumbs, show a user how they got to where they are. If you want the user to be able to jump back easily to an earlier page on your website, this is the type of breadcrumb trail that might work best for you.
Location- or hierarchy-based breadcrumbs
Another type of breadcrumb navigation is location-based breadcrumb navigation, or hierarchy-based breadcrumb navigation. Location-based breadcrumbs are static and don't change. They allow the user to see the overall structure of the site and use it as a navigation tool. Location-based breadcrumbs are especially useful for sites with a lot of hierarchical information.
For example, a non-profit organization might have information on numerous program categories, each of which have several sub-categories with links to more detailed data. Using breadcrumbs to help someone browse for the information they need will keep them on track.
Attribute-based breadcrumbs
Finally, attribute-based breadcrumb navigation gives the visitor more information about the attributes of the current page. For example, attribute-based breadcrumbs are popular on e-commerce sites, where users may want to filter search results by color, size, or type.
10 tips for using breadcrumb navigation
Once you've decided that breadcrumbs will help your users find their way around your website structure and make it more prominent on search engines like Google, there are a few things to keep in mind that will make the experience easy for everyone.
Keep breadcrumb titles consistent with page titles
Since breadcrumbs are used to help avoid confusion, you don't want to use a different name for a breadcrumb than for the page title itself. Making sure those names match and are consistent will reassure users that they're on the same page they thought they were.
Start breadcrumb trail with the home page
Although users may first access your website from a page deep within your hierarchy thanks to a link from a search result, if a hierarchy breadcrumb structure makes sense, the first item in the trail should be the home page. That way users can always link directly back there easily.
Don't make breadcrumb navigation too large
If your breadcrumb trail gets so long that it continues on to a second line, you're probably doing too much. Simple, short breadcrumbs work best and your primary navigation should be more prominent.
Include the entire navigational path
When you get deep into a site's hierarchy, it can be tempting to shorten breadcrumb navigation paths or leave steps out. But this can confuse users who, for example, want to link to specific parent pages that they can't find.
However, it's possible to include too much information. If your site's URL structure includes extraneous information that the user might find confusing (for example, a level of structure in your site that doesn't correspond to any pages the user might look for) you can eliminate that in your breadcrumb links.
Use only if it makes sense for your site structure
Breadcrumbs have many uses, but they should work to support a site's main navigation rather than replace it. If your primary navigation is simple and clear, there's no need to use breadcrumbs.
Know your audience
Consider how experienced your site's audience is with internet usage and navigation. Breadcrumb navigation is appropriate for most audiences, but it might not be the right choice if your website is aimed at users who are less experienced with the internet and are looking for simplicity, for example.
Keep it clean and uncluttered
While breadcrumbs can be very useful, you don't want them to distract from the main information on your site's pages. Keeping the text small but readable and in a standard location will help users focus on the current page until they're ready to follow a link to something else.
Progress from highest level page to lowest level page
Your trail of breadcrumbs should list higher-level pages on the left and work your way to lower-level pages on the right. It might be tempting to break the mold, but this is one place where usability and showing your website hierarchy in a way that users expect will pay off.
Keep navigation pathway easily visible
To make sure that visitors to your website can take advantage of your breadcrumb navigation, make sure it's easy to find the breadcrumb trail. Keep in mind location, design, and length of the breadcrumbs for the most user-friendly experience possible.
Get creative with design
While many sites use the greater-than sign (>) to mark the steps in the breadcrumb trail, other sites choose to use a slash (/), a colon (:) or an arrow to display the location of the current page. Some sites even include drop-down menus when users hover over breadcrumbs, giving the user a path directly to places that might not be in the direct hierarchy of the current page.
Think about what makes the path of breadcrumbs as clear as possible. Although you don't want to push the envelope to the point of confusion, you can customize the look of your breadcrumbs in a way that fits your site's structure and design using a tool like Mailchimp's website builder.
Incorporating breadcrumbs into your web design can support your primary navigation and help visitors to your page find their way around—whether it's attribute-based breadcrumbs for an e-commerce company or location-based breadcrumbs for an organization with a lot of information. Breadcrumbs are a smart way to make your website as user-friendly as possible, increase your presence on Google or other search engines, and give your customers links to exactly the information and products they're looking for.
Hopefully, your users don't need to escape an evil witch like Hansel and Gretel but keeping them from getting lost and helping them find their way easily with digital breadcrumbs will pay off!