Breadcrumb trails clarify the organization of a website and give visitors a way to browse deeper into categories. They’re also great for schema data which can greatly affect your SERP rankings too.
But designing a custom breadcrumb setup from scratch is no easy task. That’s why I’ve curated a bunch of free breadcrumb designs that you can repurpose for your own sites. They come in many different styles but they can all help visitors navigate the site better and clarify your content.
Thick Breadcrumbs
This creative thick breadcrumb design comes from Albanian coder Gerta Xhepi. She built this entire breadcrumb style with pure CSS using free Font Awesome icons.
Because these colors are so subtle you could fit them into pretty much any website. And the icons are built using font files so they’re scalable without any quality loss. Everything is setup using pure CSS so if you like this design and want to replicate it, the settings are easy enough to tweak.
Flat CSS3 Design
Flat design is still going strong and it’s one of the easier design styles to pick up. If you’re creating a website using flat colors then check out this flat breadcrumb design made with pure CSS3.
The arrows are built with some basic CSS hacks and the entire pen runs on Sass for easier editing. You can quickly change the blue background or the green hover state by altering one Sass variable.
This pen uses the Bootstrap library which also includes Font Awesome icons so this is yet another scalable breadcrumb chain you can take with you onto any project.
Bright Colors
Alternating colors are tricky to pull off unless you know exactly how many levels you’ll use in a breadcrumb navbar. This example does it right with some really cool effects and color choices that blend perfectly into the layout.
I really like these breadcrumbs for drawing attention and encouraging user interactions. But they might be a tad distracting on a content-heavy page like a blog post.
These would fit perfectly into an eCommerce shop on a product page, or maybe a company website where the color scheme needs to stand out.
Fluid Step Nav
A practical use for breadcrumbs is in a step-by-step checkout process. This typically highlights an active breadcrumb along the way so the user can see which step they’re working on.
This fluid navbar created by Adrian Pelletier is a brilliant example of this effect. It uses gradients to create an illusion of depth on the page while also encouraging visitors to click and advance forward.
Rounded Crumbs
The most surprising part about these dynamic rounded breadcrumbs is the custom animations running purely on CSS.
Each little breadcrumb has its own icon pulled from the Font Awesome library. These icons are easy to scale and they create the structure of the entire breadcrumb.
On hover you get more details with an expanding label. It’s a very unique effect and not something you find on many websites!
Pixel-Perfect Breadcrumbs
Typically when I think of breadcrumb designs these examples are closer to what I imagine. They’re pretty simple and clean with numbers for progress steps and custom hover events.
Each arrow is built using pure CSS and the breadcrumb elements fit together perfectly.
If you don’t like the colors you can always change them to match whatever project you’re building. That’s why open source code is so valuable because there’s so much you can do with it.
Reverse Arrows
Most breadcrumb arrows point from left to right but in this pen the arrow direction is reversed, even with content flowing LTR.
Notice how the last breadcrumb in the list is highlighted to let the user know it’s the final position. This is an excellent way to distinguish between crumbs that are linked/clickable vs. which one is currently active.
If you like this mirrored arrow design then definitely try reworking the code to see what you can do with it.
Highlights
Most breadcrumb menus feature hover states where you can click links to browse back through categories or previous pages. It helps to create a link-style design for these breadcrumbs including custom hover states.
You’ll find a couple nice examples in this pen featuring a dark and light version. Believe it or not the numbers in each section are generated automatically in CSS. This grants you a lot more creative control to build scalable breadcrumbs for any system.
I also like the overall shape of each panel and the drop shadow effects which really stand out against the lighter background.
Custom Separators
When you see a blog or content site with breadcrumbs you’ll mostly see very basic links with clean separators between them. This is a great style to use and if you’re looking for a place to start I recommend this pen created by Stas Melnikov.
These breadcrumbs are very stylish and super easy to customize for any website. Plus you can change the spacers to suit your personal design choices.
Credit Card Checkout
Checkout pages use breadcrumbs and progress steps to encourage customers to complete the whole process. This checkout UI created by Jessica Patzer is a fine example of breadcrumbs in the real world.
The interface does use a bit of JavaScript to create the fading effect on each input placeholder. But this isn’t related to the breadcrumbs or much of the interface so you can easily recreate this sucker with a bit of HTML and CSS.
All of these pens should help you plan and build simple breadcrumbs for any website. But if you’re looking for more examples be sure to browse around and tinker with other snippets.
This post may contain affiliate links. See our disclosure about affiliate links here.
