MARKETING | 6 MIN READ

9 Breadcrumb Tips and

Examples to Make Your
Site Way Easier to Navigate
Written by Caroline Forsey @cforsey1

In the fairytale Hansel and Gretel, two children drop breadcrumbs in

the woods to find their way home.

Nowadays, you probably don't experience too many lost-in-the-wood

experiences, but I'm willing to bet you've felt frustratingly disoriented
on poorly designed websites.

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 In website design, breadcrumb navigation is a way to show your users
their location and how they got there (similar to Hansel's
breadcrumbs). It also helps users find higher-level pages faster if they
landed on your site from search or a deep link.

Download Our Free UX Research & Testing Kit

What is breadcrumb navigation?

Breadcrumb navigation is a way for users to visualize their location on a

website. It's a secondary navigation bar that typically appears as
horizontal text links, separated by the "greater than" symbol (>).
Breadcrumb navigation improves the findability of your landing pages,
and helps users reach higher-level pages faster if they initially found
your site from search or a deep link.

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 Jakob Nielsen, co-founder of the Nielsen Norman Group, has been
recommending breadcrumb navigation since 1995, and makes a
strong point for them: "All that breadcrumbs do is make it easier for
users to move around the site, assuming its content and overall
structure make sense. That's sufficient contribution for something that
takes up only one line in the design."

If your business's website is multi-layered, you might consider

implementing breadcrumb navigation to make your site easier to
navigate. However, like any design element, there's a right and wrong
way of doing it. Here, we'll explore nine tips and examples to ensure
you're creating the most effective breadcrumb navigation for your
users.

Breadcrumb Navigation Tips and

Examples
1. Only use breadcrumb navigation if it makes sense
for your site's structure.
Breadcrumb navigation has a linear structure, so you only want to use it
if it makes sense with your website's hierarchy. If you have lower-level
pages that are accessible from different landing pages, using
breadcrumb navigation will only confuse readers who keep accessing

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 the same pages from different starting points. Additionally, if your site
is relatively simple, with only a few pages, you probably don't need
breadcrumb navigation.

2. Don't make your breadcrumb navigation too

large.
Your breadcrumb navigation is a secondary tool to your primary
navigation bar, so it shouldn't be too large or prominent on the page.
For instance, on DHL's website, their primary navigation bar is large
and recognizable, with columns like "Express" "Parcel & eCommerce"
"Logistics", etc. Their breadcrumb navigation is the smaller section
below that reads, "DHL Global | > Logistics | > Freight Transportation".
You don't want your users to mistake your breadcrumb navigation as
the primary navigation bar.

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 3. Include the full navigational path in your
breadcrumb navigation.
I Googled "Elon University Non-Degree Students" to reach this landing
page, but Elon is smart to include the full navigational path, including
"Home" and "Admissions". 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 homepage, you want to give them an easy way to
explore your site from the beginning.

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 4. Progress from highest level to lowest.
It's important your breadcrumb navigation reads left to right, with the
closest link to the left being your homepage, and the closest link to the
right being the user's current page. A study by Nielsen Norman Group
found users spend 80% of their time viewing the left half of a page and
20% viewing the right half, making a strong case for left-to-right
design. Plus, the link closest to the left will appear as the beginning of
the chain, so you want it to be your highest-level page.

5. Keep your breadcrumb titles consistent with your

page titles.

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 To avoid confusion, you'll want to remain consistent with your page
and breadcrumb titles, particularly if you're targeting certain keywords
in those titles. You also want to clearly link your breadcrumb titles to
the page. If the breadcrumb title doesn't have a link, make it clear.
Nestle effectively labels its breadcrumb titles to match the page titles.
"Areas of impact & commitment", for instance, reads the same in the
breadcrumb navigation as it does on the page.

Nestle also does a good job differentiating 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 need to follow the traditional path if
you feel a different design could appeal more to your audience, or
look better on your site.

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 For instance, Target uses breadcrumb navigation in their product
pages (because who wouldn't get lost in the virtual shoe section?), but
uses "/" symbols and simple black and grey text. In this case, the subtle
design variation makes sense for their site's aesthetic.

7. Keep it clean and uncluttered.

Your breadcrumb navigation is simply an aid for the user, and ideally
shouldn't be noticed unless the user is looking for it. For this reason,
you don't want to clutter your breadcrumb navigation with unnecessary
text.

Eionet, for instance, could do without their "You are here" text. While
meant to be helpful, the text clutters the page. With the right design, a
breadcrumb navigation should be noticeable enough without an
introduction.

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 8. Consider which type of breadcrumb navigation
makes the most sense for your site.
There are a few different types of breadcrumbs you might use --
location-based, attribute-based, and history-based. Location-based
breadcrumbs show the user where they are in the site's hierarchy.
Attribute-based breadcrumbs show users which category their page
falls into. Finally, history-based breadcrumbs show users the specific
path they took to arrive at the current page.

Bed Bath & Beyond uses attribute-based breadcrumb navigation to

show users which category their product page falls under, so users can
click back to "Kitchen" or "Small Appliances" to peruse similar items.
This type of breadcrumb navigation is most effective for Bed Bath &
Beyond customers. When you're creating a breadcrumb navigation,
consider what's most useful for your site's visitors.

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 9. Know your audience.
Best practices in breadcrumb navigation urge web designers to place
the navigation at the top of the page -- but Apple, one of the most
valuable companies of all time, defies this logic by putting their
breadcrumb navigation at the bottom of their site. Ultimately, it's
critical you know your audience. Apple's customers are typically tech-
savvy, and would likely find the navigation if they needed it. Consider
your customers' needs, and implement A/B testing if you're unsure.

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 Ultimately, breadcrumb navigation is an effective tool to make your site
easier to navigate, but you want to follow design best practices to
ensure you're leveraging the tool's helpfulness. For additional UX
advice, check out "The Ultimate Guide to UX Design". 

Originally published Sep 20, 2018 6:00:00 AM, updated November 20 2019

Topics: User Experience

Don't forget to share this post!

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 Related Articles

The Beginner’s The Ultimate Guide It’s the Little

Guide to Usability to Designing for Things: How To
Testing [+ Sample the User Write Microcopy
Questions] Experience

MARKETING | 11 MIN READ MARKETING | 23 MIN READ MARKETING | 9 MIN READ

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 Popular Features


Free Tools


Company


Customers


Partners


     

App store Google Play

HubSpot
Logo
Copyright © 2018 HubSpot, Inc.

Legal Stuff | Privacy Policy

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD