Breadcrumb Navigation and How to Use it

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.

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.

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.