Ultimate Guide To Breadcrumbs In Web Design

The best way to improve user experience is through a clear navigation. Navigation can be improved by adding breadcrumbs into pages.

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

Intro To Breadcrumbs

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

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!)

Crumbs In Blog Layouts

One of the favorite blog breadcrumb designs is the TutsPlus layout which adds breadcrumb elements into the main page header.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.

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.If visitors want to find related products then breadcrumb links are the perfect solution.

Breadcrumb Web Design Freebies

There are tons of free PSDs online featuring incredible breadcrumbs.

Checkout Process

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.

Traditional Crumbs

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

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

Light Blue Gradients

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

Swift Crumbs

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

Free Breadcrumb Snippets & 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 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.

WP Breadcrumb

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