42 Great CSS Breadcrumb Design Examples
Breadcrumbs are an essential element of web navigation, as it indicates at all times where the user is on the website and prevents the user from getting lost.
In this article, you will discover 42 code snippets of hand-picked breadcrumb CSS design examples to get inspiration for creating your next website.
Pixel perfect breadcrumb navigation
A pretty breadcrumb in dark mode with 2 variants and a nice hover effect on the different elements.
Made with:
HTML
CSS
Dependencies:
None
View Code and Demo
Breadcrumb with rounded corners
Rounded corners make your design look friendlier and if this is what you want to achieve this breadcrumb style may be what you are looking for.
Made with:
HTML
CSS
Dependencies:
None
View Code and Demo
Simple Skew breadcrumb
A simple but effective breadcrumb, it has 2 variants, both using the CSS skew property.
Made with:
HTML
CSS
Dependencies:
SCSS
View Code and Demo
Pure CSS breadcrumb navigation
In this code snippet, you find breadcrumb navigation with a simple hover effect using only pure CSS.
Made with:
HTML
CSS
Dependencies:
None
View Code and Demo
Flat CSS3 Breadcrumb
Another CodePen with effective but clean breadcrumb navigation with a flat style.
Made with:
HTML
CSS
Dependencies:
SCSS
View Code and Demo
Refactoring UI - Breadcrumbs
A code fragment of a minimalistic but elegant breadcrumb with a grayscale color palette with a subtle hover effect.
Made with:
HTML
CSS
Dependencies:
None
View Code and Demo
Arrow-shaped breadcrumb
This CodePen of an arrow-shaped breadcrumb shows that even with a simple style and not much code you can achieve a very good result.
Made with:
HTML
CSS
Dependencies:
SCSS
View Code and Demo
Vertical breadcrumb
A vertical breadcrumb is a different and creative way to show the path to the page you are on without taking up too much space.
Made with:
HTML
CSS
Dependencies:
Pug
Stylus
View Code and Demo
Breadcrumb with Material Design Colors
In this CodePen you have a progress tracker/stepper/breadcrumb using Material Design colors and an active state on click.
Made with:
HTML
CSS
JavaScript
Dependencies:
Pug
Stylus
TypeScript
View Code and Demo
Tiny CSS3 Round Breadcrumb
A code fragment of a rounded style breadcrumb with a smooth name reveals on hover.
Made with:
HTML
CSS
Dependencies:
SCSS
View Code and Demo
Breadcrumb with arrows
In this code fragment, we have 4 beautiful variants of breadcrumbs with arrows, 2 light, and 2 dark.
Made with:
HTML
CSS
Dependencies:
SCSS
View Code and Demo
Breadcrumb style made with Force Framework
A CodePen of 7 different variants of colored breadcrumbs made with a CSS framework called Force.
Made with:
HTML
CSS
Dependencies:
Force framework
View Code and Demo
Credit Card Checkout stepper/breadcrumb
This is more of a step-by-step indicator of a credit card payment, but it can also be used as inspiration for a breadcrumb design example.
Made with:
HTML
CSS
JavaScript
Dependencies:
None
View Code and Demo
Breadcrumb With Dropdown Navigation
A code snippet of a basic breadcrumb with an embedded dropdown that displays on hover.
Made with:
HTML
CSS
Dependencies:
Tachyons CSS Toolkit
Bootstrap
View Code and Demo
Multi-line Pure CSS Breadcrumb
Need extra information on your breadcrumbs? This one has a multi-line function to add additional data.
Made with:
HTML
CSS
Dependencies:
SCSS
View Code and Demo
Flat breadcrumb buttons
3 variants with different colors of flat breadcrumb navigation and with an arrow effect on hover.
Made with:
HTML
CSS
Dependencies:
SCSS
View Code and Demo
Bootstrap Breadcrumb made with Material Design & Bootstrap 4
If you are a fan of the Bootstrap framework, in this code fragment you will find 12 variants of colored breadcrumbs with different separators.
Made with:
HTML
CSS
Dependencies:
Font Awesome
View Code and Demo
Topcoatish Breadcrumb
A breadcrumb that has dark and light modes, and a variant with a search bar that opens on mouseover.
Made with:
HTML
CSS
Dependencies:
None
View Code and Demo
Flat style breadcrumb with hover animation
In this CodePen you find colorful breadcrumbs with an eye-catching animation when you move the mouse over one of the items.
Made with:
HTML
CSS
Dependencies:
SCSS
View Code and Demo
Breadcrumb with collapse animation
A pure CSS collapse breadcrumb that has a pretty smooth reveal animation of the item title on hover.
Made with:
HTML
CSS
Dependencies:
None
View Code and Demo
Responsive breadcrumb
Do you need breadcrumbs in different sizes? In this CodePen you will find 3 sizes of a basic responsive breadcrumb.
Made with:
HTML
CSS
Dependencies:
None
View Code and Demo
Minimalist breadcrumb
If the style you are looking for is something subtle but effective, this breadcrumb may be your choice.
Made with:
HTML
CSS
Dependencies:
None
View Code and Demo
Simple breadcrumb
This simple breadcrumb design is made with the Aqua CSS framework and has a nice smooth hover line effect for the different links.
Made with:
HTML
CSS
Dependencies:
Aqua CSS
View Code and Demo
Ribbon Breadcrumb Trail
A code fragment with an old-style ribbon breadcrumb trail and a subtle background change when hovering over its elements.
Made with:
HTML
CSS
Dependencies:
SCSS
View Code and Demo
Expanding arrow breadcrumb
If you don't have much room to accommodate a breadcrumb, this code snippet of an expandable arrow design version may be your option.
Made with:
HTML
CSS
Dependencies:
SCSS
View Code and Demo
Sharpen breadcrumb
This is a slanted version of a breadcrumb with attention-grabbing color and typography, it also has a hover effect that increases the margin of the elements.
Made with:
HTML
CSS
Dependencies:
SCSS
View Code and Demo
Outlined breadcrumb
A breadcrumb with outlined, tilted items and an appealing hover effect.
Made with:
HTML
CSS
Dependencies:
SCSS
View Code and Demo
Gradient style breadcrumb
This code snippet contains an arrow-shaped breadcrumb with a pretty gradient color style.
Made with:
HTML
CSS
Dependencies:
Haml
SCSS
View Code and Demo
Different breadcrumb separators
In this CodePen we can find 4 breadcrumbs with the same style but with different separators.
Made with:
HTML
CSS
Dependencies:
Sass
View Code and Demo
Various breadcrumb dividers
Another CodePen that has 5 breadcrumbs with a similar style but with a different divider.
Made with:
HTML
CSS
Dependencies:
None
View Code and Demo
Collapsed breadcrumbs
If your website space is tight, this collapsed breadcrumb that expands as you mouse over items can fit your needs.
Made with:
HTML
CSS
Dependencies:
None
View Code and Demo
Tilted breadcrumb
3 breadcrumbs with the same inclined style but with different levels of contraction and that expand when hovering over it.
Made with:
HTML
CSS
Dependencies:
None
View Code and Demo
Breadcrumbs designs (Skewed, Border-radius, click effect)
Another code snippet that has 3 similar breadcrumbs, but with different tilt levels and a subtle hover effect, made only with HTML and CSS.
Made with:
HTML
CSS
Dependencies:
None
View Code and Demo
Checkout breadcrumb
A breadcrumb focused on a checkout, with icons and a colorful hover effect on the elements.
Made with:
HTML
CSS
Dependencies:
SCSS
View Code and Demo
List of cool breadcrumb styles
This code snippet contains 9 different breadcrumb styles for you to find the one that suits your needs and style.
Made with:
HTML
CSS
Dependencies:
None
View Code and Demo
Pink breadcrumb
If pink is your favorite color this breadcrumb is for you, with icons and a background color change when you hover over it.
Made with:
HTML
CSS
Dependencies:
None
View Code and Demo
Chevron Breadcrumbs
This code snippet contains a chevron-style breadcrumb navigation with subtle gray styling.
Made with:
HTML
CSS
Dependencies:
Pug
SCSS
View Code and Demo
Sassy Breadcrumbs
A creatively styled breadcrumb, featuring a nice color palette and an underline when hovering over the text.
Made with:
HTML
CSS
Dependencies:
SCSS
View Code and Demo
Expandable breadcrumbs
Another extensible breadcrumb for when space in your web application is limited, very useful when elements have long text.
Made with:
HTML
CSS
JavaScript
Dependencies:
SCSS
JQuery
View Code and Demo
Translucent breadcrumb
If you want to show the background of a web page at all times, a translucent background breadcrumb like the one you can see above is a good option.
Made with:
HTML
CSS
Dependencies:
SCSS
View Code and Demo
Breadcrumbs with ellipsis
A responsive breadcrumb that collapses the text of the elements depending on the width of the container.
Made with:
HTML
CSS
Dependencies:
SCSS
View Code and Demo
CSS Breadcrumb
simple but effective code snippet made only with HTML and CSS of a clean and minimalist blue breadcrumb.
Made with:
HTML
CSS
Dependencies:
SCSS
View Code and Demo
