Blog

What Is Breadcrumb Navigation, and How Should You Be Using It?

Madison Taylor Marketing

Topics: Website Development

In the famous fairy tale Hansel and Gretel, the two children drop crumbs of bread in the forest to help them find their way home. Hopefully you don’t have to deal with kids getting lost in the woods much anymore, but that doesn’t mean today’s web users can’t still get lost in a forest of complicated, interlinked pages.

“Breadcrumb navigation” is a way to show users on a website where they are and how they got there. If they want to, they can go back a step or two or retrace their steps entirely.

Breadcrumbs usually take the form of horizontal text links at the top of a page, separated by the “greater than” symbol (>). It improves the ability of your visitors to find your landing pages and makes it easier for them to reach high-level pages if they initially came to your site from a link or search result.

If your business’ site has a lot of layers and branching links, you should probably consider implementing breadcrumbs. Like any aspect of website design, though, there’s a right and a wrong way of doing this.

Only Use Them If They Make Sense

Only if it makes sense. Breadcrumbs are linear in nature — they don’t branch or diverge, they only follow a single path — so if you have pages that can be accessed from several different landing pages, breadcrumbs won’t help much.

On the other hand, if your site is relatively simple, with very few pages or layers, breadcrumb navigation probably isn’t necessary.

breadcrumb nav main

Don’t Make Them Too Big

Your breadcrumb navigation isn’t trying to replace your main navigation bar or menus, so it shouldn’t steal the show on the page. On Backcountry.com’s site, the primary navigation bar is large and clearly marked, with broad categories like “Brands,” “Activities,” “Men,” and “Women.”

The breadcrumb bar is much smaller, and only pertains to the particular product page we’re on. It answers the question “how did I find this product,” not “what else is on this site?” That way, users won’t get confused trying to use it as the primary navigation bar.

Some of your visitors are going to arrive at your blog posts or web pages via search, not by navigating your website. When they get there, if the information they see isn’t exactly what they need, they might want to broaden their browsing a little without searching again.

That’s where the breadcrumbs are so useful. Take another example from Backcountry.com.

breadcrumb nav sub

This is the breadcrumb path for a particular camping tent. A visitor might have arrived here via search or a direct link from social media, only to find that this particular tent isn’t quite to their liking. Luckily, the breadcrumbs give them some context — they can now see that this is a 3-season family and campground tent.

If they know they want something similar, they can click that link, or they can go slightly broader by looking at all 3-season tents, all tents and shelters, or everything in the “Hike & Camp” category. Each of those breadcrumbs is a clue to what the tent is for and how they might find something similar without having to search again or try to find it through the main navigation bar.

Move Left To Right

The farthest left link should be your homepage or the top of your navigational tree, and the farthest right link should be your current page. Not only is this in keeping with the natural direction that English speakers read, but users tend to look at the left side of a page first.

In fact, one study indicates that users devote around 80% of their attention to the left half of a page and only 20% to the right side, so it makes sense to put important information on the left side of the screen.

There's Room For Creativity

The usual breadcrumb format is plain text divided by the “greater than” symbol (>), but yours doesn’t have to be that way. You can put it in the center of the page, use other symbols in between categories, or use bold text or colors to distinguish the page the user is on from the ones they used to get there.

Don’t go overboard, though. Remember, this is just a user aid, not a major design element of your page. Users who need it should be able to find it, but users who don’t need it shouldn’t be interrupted or distracted by it.

Think About Which Type Of Breadcrumb Is Best For Your Site

Location-based breadcrumbs show the user where they are in the site’s hierarchy, allowing them to see the structure of your site from broad landing pages down to specific blog posts or informational pages.

History-based breadcrumbs show the users the specific path through other web pages that they used to get to where they are now. These are less commonly used, since the “Back” button in a web browser does basically the same thing.

Attribute-based breadcrumbs are very useful for e-commerce, helping customers click backwards to larger categories to find similar items. For example, a blender might be listed under Home > Kitchen > Small Appliances > Food Processors, allowing the visitor to find similar products with ease.

At the end of the day, breadcrumb navigation can be very useful, but it’s just one aspect of successful website design. For more tips on website design, check out our comprehensive guide to website development.

Next Step

Your company’s marketing should be the secret sauce, ever elusive unicorn, and magic bullet that your company has been waiting for. Bottom line, it should be bringing you that money.

Strategic Marketing Inbound Marketing
How Much Should a Good Website Cost?
Blog
How Much Should a Good Website Cost?

Determining how much a website costs by looking at it is a lot like trying to guess what a car costs by watching it ...

Signs That Your Website Needs an Overhaul in 2018
Blog
Signs That Your Website Needs an Overhaul in 2018

Fill in the blank: "Opinions are like ______. Everyone has one." If you said “websites,” then you’re absolutely ...

How to Launch a Kick-Ass Website
Blog
How to Launch a Kick-Ass Website

Lesson One: Engage readers. Make a great first impression.    Did you know the majority of prospective customers these ...

12 Plug-ins for Your WordPress Website to Help Rock Online Marketing
Blog
12 Plug-ins for Your WordPress Website to Help Rock Online Marketing

If you’ve got a lot of time on your hands, we challenge you to hop onto WordPress and check out all 40,296 different ...

Want to Increase Sales? Better Web Development Will Help!
Blog
Want to Increase Sales? Better Web Development Will Help!

Whether you realize it or not, your online storefront plays a direct role in determining whether or not consumers will ...

5 Quick and Easy Ways to Make Your Website Appear More Professional
Blog
5 Quick and Easy Ways to Make Your Website Appear More Professional

Web design is constantly evolving. What was considered cutting-edge and professional several years ago may appear dated ...

Is a New Website on the Horizon?
Blog
Is a New Website on the Horizon?

Think of your website as the digital face that you show the world. In today's business realm, you cannot exist without ...

Does My Business Need a Mobile App?
Blog
Does My Business Need a Mobile App?

Yes, they make an app for that … but do you? 

What to Expect When You're Expecting (A New Website)
Blog
What to Expect When You're Expecting (A New Website)

Whether you're designing a brand new website or redesigning an existing one in order to give it more flair or ...

What You're Losing by Not Being Mobile Ready
Blog
What You're Losing by Not Being Mobile Ready

When someone coined the phrase "You can't take it with you," they probably didn't foresee the future of mobile devices. ...

7 Things Your Website Needs to Rock
Blog
7 Things Your Website Needs to Rock

Your website needs to rock. Seriously. We all know it, but getting there is a lot harder than you'd think. Since we're ...

The Importance of A Kick A@$ Website
Blog
The Importance of A Kick A@$ Website

Over the past few years (probably the last decade) web has fast become one of the most pivotal pieces of marketing. ...

Need More Help? Talk to the Experts.

Contact Madison Taylor Marketing