Ultimate Guide To Breadcrumbs In Web Design

An excellent user experience works to guide the visitor towards their goal. This could be purchasing a product, reading an article, or messaging someone on a social site.

The best way to improve user experience is through a clear navigation. And you can improve navigation by adding breadcrumbs into your pages.

These breadcrumbs help define a content hierarchy for your page and encourage visitors to dig deeper into your site. Whether that site is an ecommerce shop or an online blog, it’s always a good thing to get visitors digging deeper.

Let’s dive into breadcrumbs and see how these can be used on the web. I’ll share my favorite examples along with some free resources for designers & developers.

Intro To Breadcrumbs

Generally breadcrumbs are used to denote a hierarchy in content. These let your readers know exactly where they are on your site and how each page fits into the overall structure.

This layered breadcrumb nav fits nicely with multi-level website categories. But you might also use breadcrumbs for organizing other features like tags, archives, or even multi-paged articles.

Detailed breadcrumbs are always useful because they encourage users to get deeper into the site. Ecommerce shops are notorious for detailed breadcrumbs because they can often have 3 or 4 tiers of categories(or more!)

Amazon is the largest ecommerce shop you’ll find and their breadcrumbs are incredibly detailed.

amazon breadcrumbs

If you have tons of subcategories for a detailed website hierarchy then breadcrumbs are practically a no brainer.

They don’t take up much space but they do increase user engagement. You can even add schema code to your breadcrumbs for rich data snippets picked up by Google.

Generally these won’t do much for SERPs but you do get noticeable breadcrumb features in Google.

google breadcrumbs serps

In fact most of Google’s websites use these breadcrumbs where it makes sense.

Take for example their webmasters support page which offers hundreds of resources for website owners. With so many guides it can feel overwhelming. How do you make it easier?

Clear content hierarchy. Breadcrumbs are just one part of designing this hierarchy for the best user experience.

google support breadcrumbs

Not every website needs breadcrumbs so these aren’t crucial page elements. My goal with this post is to show which types of content work best with breadcrumbs and how you might use them on your own website.

Crumbs In Blog Layouts

Blogs rarely use categories that go beyond 2 or 3 sub-categories. This means that blog/news site breadcrumbs are usually pretty simple.

But even a simple breadcrumb path can encourage more clicks, assuming the breadcrumbs are noticeable and easy to use.

I prefer to see breadcrumbs near the page header and in clear view. They should define what the page is about and include links to relevant categories.

ubuntu handbook breadcrumbs

The above example from the Ubuntu Handbook is perfect to mimic for any simple setup. It only features a main home link, the inner category, and the current page.

Few blogs will end up more complicated than this but it shows how well breadcrumbs work in the right setting. Plus users can quickly access other how-to articles if they’re curious to read more.

But one of my favorite blog breadcrumb designs is the TutsPlus layout which adds breadcrumb elements into the main page header.

tutsplus breadcrumbs

Notice how the category crumbs lead into the main heading text. This makes it all seem like one big page element where the breadcrumbs are a precursor to the headline.

Since TutsPlus uses a large dropdown for their navigation it’s tougher to dig into categories. But these breadcrumb links offer one-click access to categories that might interest the user based on whatever they’re reading.

Follow whatever techniques fit best for your blog. You don’t need breadcrumbs to appear flashy or detailed; they just need to work.

Ecommerce Breadcrumb Designs

The other popular use for breadcrumbs is with ecommerce shops. These websites typically have a lot going on with many layers of categories to browse through.

I always recommend ecommerce shops to use breadcrumbs because they’re just so useful to the end user. Product pages don’t have as much content as a blog post so visitors aren’t sticking around as long.

If visitors want to find related products then breadcrumb links are the perfect solution.

wayfair breadcrumbs bar

Wayfair runs an amazing design and their breadcrumb navigation is superb. If you browse around the site you’ll notice a lot of their products fall 5-6 levels deep into sub-categories.

For this type of ecommerce shop a breadcrumb nav is essential. It lets the user jump as many category levels as they want all from a single page.

I also like how the category pages themselves include breadcrumbs. The main breadcrumb bar is visible on basically every page so it’s a consistent navigation for Wayfair shoppers.

You’ll find a similar design on Walmart’s website although their breadcrumb nav is much smaller and subtler.

walmart breadcrumb links

Walmart also keeps this breadcrumb nav visible on every page including category pages. The products themselves feature much larger page headers so the breadcrumbs can go unnoticed.

But the upside of smaller links is that they don’t overtake the page. You save more room on the screen for product prices and checkout features.

No right or wrong way to do ecommerce breadcrumbs. They key is to just make sure you have them somewhere on the page where users can see them and use them.

Breadcrumb Web Design Freebies

Instead of designing your own breadcrumb UIs why not restyle an existing one? There are tons of free PSDs online featuring incredible breadcrumbs.

These are my top picks since they’re easy to download and can fit into any website.

Sometimes plaintext links are fine but if you want a little more kick to your breadcrumbs then try reworking these freebies.

Checkout Process

checkout crumb psd

This checkout breadcrumb is actually a progress step UI. But you can reuse this same interface to create breadcrumbs too.

Both progress steps & breadcrumbs look very similar but they’re used for different purposes. The arrow shapes lead visitors through the links and each “segment” is clearly defined with drop shadows. So either way this freebie works well for getting started.

Traditional Crumbs

traditional breadcrumbs psd

Here’s a more traditional breadcrumb bar with a unique twist on the home link. Everyone recognizes the house icon as a link to the homepage so this cuts down on screen space.

Plus with the home link colored differently it represents the root link in the entire chain. Again the arrows denote a clear hierarchy which is perfect for any breadcrumb design.

Simple Nav

dark and light breadcrumbs

Offering both a dark and light version, this freebie should fit into practically any webpage with ease.

You can even rebuild this crumb bar using basic CSS3 if you have the time. But you can also restyle the images to fit your color scheme and export them directly from Photoshop.

I like this freebie as more of a starting point for minimalist layouts.

Light Blue Gradients

blue gradient breadcrumbs

It’s super easy to create gradients in CSS3 and now you can apply them to your pages with these breadcrumbs.

There are Photoshop extensions that export code directly from PSD files. But I always prefer hard coding because the results are usually cleaner, and this breadcrumb really shouldn’t be too hard to recreate.

Again it’s totally free so you can download this and change the gradient colors to suit whatever project you’re working on.

Swift Crumbs

swift breadcrumbs freebie

The team at SwiftPSD released these breadcrumbs offering a simple yet elegant way to add legible breadcrumbs to your page.

They each sit atop a gradient bar element with crisp text and the classic side arrow separator. You can adapt this to work with any font or any color scheme so it’s a tried & true breadcrumb design that’ll last for years.

Free Breadcrumb Snippets & Plugins

Once you have a design style you probably want to get it coded. But if you’re not much of a coder you can always rely on code snippets or even plugins.

These are some of the best out there for quickly adding breadcrumbs to your page. And if you Google around you can probably find a whole lot more.

Breadcrumb NavXT

breadcrumb navxt plugin

Considering WordPress’ massive plugin collection it should be no surprise that there’s an awesome breadcrumb plugin out there.

Breadcrumb NavXT is completely free and it’s the easiest way to add breadcrumbs onto any page. This plugin uses the Schema.org code to create SEO-friendly breadcrumbs that Google will pick up and display in your search rankings.

It also has a settings panel so you can add breadcrumbs into your theme without any coding whatsoever. A great choice for WP users who want a simple & easy breadcrumb setup.

WP Breadcrumb

wordpress breadcrumbs plugin

One other choice for WordPress is the simpler Breadcrumb plugin. This doesn’t get as many frequent updates but it’s still a stable plugin that lets you quickly add breadcrumbs to your site.

These crumbs mostly work via shortcodes but you can change the settings to run breadcrumbs on any page.

Unfortunately the default design is pretty ugly so you’ll want to edit the breadcrumbs in CSS. If you don’t have much coding knowledge then this plugin may be a tougher hurdle than NavXT.

jQuery rCrumbs

jquery rcrumbs plugin

If you search through GitHub you’ll find tons of free repos with code snippets and plugins for every element. The jQuery rCrumbs plugin is one such example to help you build gorgeous breadcrumb navigations powered by jQuery.

It’s fully responsive and works on any list of link elements. You just create an unordered list with a container using an ID like #breadcrumbs and point the rCrumbs function towards that list.

This automatically renders the list into pristine breadcrumbs with optional settings like ellipses for longer lines. A nice dynamic plugin for coders who want more control over their breadcrumb display.

Bootsnipp Breadcrumbs

bootsnipp breadcrumbs plugin

If you’re a fan of Twitter’s Bootstrap library then you’ll love these breadcrumb snippets hosted on Bootsnipp.

Each snippet is submitted by others who release their codes for free to copy & mess with. Notably these all run on the latest version of Bootstrap with many codes even supporting the BS4 update.

But these snippets are only really useful to developers who work with Bootstrap. Still they’re invaluable for creating breadcrumbs that work and comply to Bootstrap’s responsive styles.

CodePen Snippets

codepen breadcrumbs search

One other resource you might dig through is CodePen. This free browser IDE lets developers save their code snippets and share them with the world.

If you browse through the breadcrumbs tag you’ll find loads of CSS breadcrumb styles ripe for the picking. You can even test them out right in CodePen and duplicate the repo to save your changes.

Moving Forward

If you run a site that could benefit from breadcrumbs I recommend testing them out. You don’t have a lot to lose and most users appreciate the added navigation.

But make sure you follow some of the best practices from the examples in this post. A difficult breadcrumb nav is worse than nothing at all. Try to place yourself in the user’s eyes and design breadcrumbs for their needs.

Jake is a writer & designer covering the latest tech on the web. He frequently writes about user experience and resources for building usable websites. Check out more work on his portfolio site and find his latest updates on Twitter @jakerocheleau.

Leave a Reply

Your email address will not be published. Required fields are marked *

Deals

Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.