By Caroline Forsey

In the fairy tale 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 disoriented on a poorly designed website.

In web design, breadcrumb navigation is a way to show your users their location and how they got there. Like Hansel’s breadcrumbs, it helps users retrace their path and see where they are in the greater scheme of your site.

While you can style breadcrumbs however you’d like, they tend to look the same across websites that use them. Here’s a simple example of breadcrumbs from the HubSpot Knowledge Base:

Jakob Nielsen, co-founder of the acclaimed Nielsen Norman Group, has been recommending breadcrumb navigation since 1995, and makes a strong point for their usefulness and efficiency: “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 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.

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 …read more

Source:: HubSpot Blog