In the fairy tale Hansel and Gretel, two children drop breadcrumbs in the forest to find their way home. You probably don’t have too many lost experiences these days, but I’ll bet you felt disoriented on a poorly designed website.
In web design, breadcrumb navigation is a way to show your users their location and how to get there. Like Hansel’s breadcrumbs, it helps users backtrack their way and see where they are in the overall schema of your website.
What is breadcrumb navigation?
Breadcrumb navigation is a way for users to visualize their location on a website. It’s a secondary navigation bar, usually shown as horizontal text links separated by an angle bracket. Breadcrumb navigation improves the findability of your landing pages and helps users get to parent pages faster if they originally found your website via search or a deep link.
While you can style breadcrumbs any way you want, they usually look the same on websites that use them. Here is a simple example of breadcrumbs from the HubSpot knowledge base:
Jakob Nielsen, co-founder of the renowned Nielsen Norman Group, has recommended breadcrumb navigation since 1995 and underlines its usefulness and efficiency: “Everything breadcrumbs do is to make it easier for users to move around the website, provided the content and overall structure make sense. That’s enough contribution for something that only takes up one line in the design. “
If your company’s website is layered, consider implementing breadcrumb navigation to make your website easier to navigate. However, as with any design element, there is a right and a wrong course of action. Here we’re going to examine nine tips and examples to ensure you’re creating the most effective breadcrumb navigation for your users.
Tips and examples for breadcrumb navigation
1. Only use breadcrumb navigation if it makes sense for the structure of your site.
The breadcrumb navigation is linear in structure, so you’ll only want to use it when it makes sense with the hierarchy of your website. If you have child pages that can be accessed from different landing pages, using breadcrumb navigation will only confuse readers who access the same pages over and over from different starting points. Additionally, if your website is relatively simple and has only a few pages, you probably don’t need breadcrumb navigation.
2. Don’t make your breadcrumb navigation too big.
Your breadcrumb navigation is a secondary tool to your primary navigation bar, so it shouldn’t be too big or noticeable on the page. For example, on the DHL website, the main navigation bar is large and recognizable, with columns like “Express”, “Parcel & eCommerce”, “Logistics”, etc. The breadcrumb navigation is the smaller section below that reads “DHL Global |> Logistics |> Freight.” “. You don’t want your users to confuse your breadcrumb navigation as the primary navigation bar.
3. Paste the full navigation path into your breadcrumb navigation.
I Googled “Elon University Non-Degree Students” to get to this landing page, but Elon is smart to provide the full navigation path, including the “Home” and “Admissions”. If you skip certain levels, you will confuse users and the breadcrumb path will not feel that helpful. Even if users didn’t start on the home page, you want to give them an easy way to explore your site from the start.
4. Progress from the highest to the lowest level.
It’s important that your breadcrumb navigation reads from left to right, with the next link on the left being your home page and the next link on the right being the user’s current page. A study by the Nielsen Norman Group found that users spend 80% of their time looking at the left half of a page and 20% looking at the right half, which is a strong argument in favor of left-to-right design. Also, the link closest to the left will show up at the beginning of the chain, so you want it to be your top-level page.
5. Keep your breadcrumb titles consistent with your page titles.
To avoid confusion, it is a good idea to stay consistent with your page and breadcrumb titles, especially when targeting specific keywords in those titles. You’ll also want to clearly link your breadcrumb titles to the page. If there is no link in the breadcrumb title, make this clear. Nestle effectively labels its breadcrumb titles to match the page titles. “Areas of Effect & Engagement”, for example, reads in the breadcrumb navigation just like on the page.
Nestle also does a good job of distinguishing links from non-links with different colors – the links are blue while the non-links remain gray.
6. Get creative with design.
The traditional breadcrumb navigation looks like this: Home> About Us> Careers. However, you don’t have to follow the traditional route if you think a different design might better appeal to your audience or look better on your website.
For example, Target uses breadcrumb navigation on their product pages (because who wouldn’t get lost in the virtual shoe area?), But uses “https://blog.hubspot.com/” icons and simple black and gray text. In this case, the subtle design variation makes sense to the aesthetics of your site.
7. Keep it neat and tidy.
Your breadcrumb navigation is simply a help to the user and ideally should go unnoticed unless the user searches for it. Because of this, you don’t want to clutter your breadcrumb navigation with unnecessary text.
Eionet, for example, could do without their “You are here” text. The text should be helpful, but clutter the page. With the right design, breadcrumb navigation should be sufficiently noticeable even without an introduction.
8. Think about the type of breadcrumb navigation that makes the most sense for your site.
There are a couple of different types of breadcrumbs you can use – location-based, attribute-based, and history-based. Location-based breadcrumbs show the user where they are in the hierarchy of the site. Attribute-based breadcrumbs show users which category their page falls into. Finally, history-based breadcrumbs show users the specific path they took to get to the current page.
Bed Bath & Beyond uses attribute based breadcrumb navigation to show users which category their product page falls into, so users can click back on “Kitchen” or “Small Appliances” to browse related items. This type of breadcrumb navigation is most effective for Bed Bath & Beyond customers. When creating a breadcrumb navigation, think about what will be most useful to your website visitors.
9. Know your audience.
Breadcrumb navigation best practices urge web designers to put navigation at the top of the page – but Apple, one of the most valuable companies of all time, defies that logic by placing its breadcrumb navigation at the bottom of their website. Ultimately, it is important that you know your audience. Apple’s customers are usually tech-savvy and would likely find the navigation system when they need it. Be aware of your customers’ needs and implement A / B testing if you are unsure.
Breadcrumb navigation in HTML and CSS
In addition to being useful, breadcrumbs are easy to add to your website with a little bit of HTML and CSS code.
Let’s start with the HTML we’ll be using to create the links ourselves. The easiest way to do this is to organize your links in an unordered list (
- ) Element, with each list element (
) consisting of a link in the breadcrumb row up to the last point, which describes the current page.
Here is a breadcrumb HTML template that you can use:
<nav class="breadcrumb" aria-label="Breadcrumb" >
<ul>
<li><a href="https://blog.hubspot.com/marketing/#URL">Top-level page</a></li>
<li><a href="https://blog.hubspot.com/marketing/#URL">Second-level page</a></li>
<li><a href="https://blog.hubspot.com/marketing/#URL">Third-level page</a></li>
<li>Current Page</li>
</ul>
</nav>
Notice how I also put the unordered list in an HTML code