Breadcrumbs is a pack of eight breadcrumb navigation sets, designed and maintained in-house by uiCookies. Every set comes in three versions that look the same: plain HTML and CSS, Bootstrap 5.3 built on its own .breadcrumb component and –bs-breadcrumb-divider, and Tailwind CSS 4. It covers classic separators, arrow steps, pills and tags, icons, long paths that collapse or shorten on small screens, page headers, a dark set and a modern CSS set with popover menus, and one example includes BreadcrumbList structured data.
A good breadcrumb is quiet and exact. It sits in a nav element labelled Breadcrumb, uses an ordered list because the order is the meaning, and marks the last item with aria-current="page" instead of linking a page to itself. Its separators are drawn in CSS so screen readers do not read out a row of slashes, its links are large enough to tap, and long paths collapse instead of wrapping into three lines on a phone. When the same path is also published as BreadcrumbList JSON-LD, search engines can show it in results in place of the raw URL.
Free download Browse live demos All snippets
The sets
1. Classic Breadcrumb Separators
Slash, chevron, arrow and dot separators on the same markup, with a BreadcrumbList JSON-LD example that matches the visible trail.
Use it as the default breadcrumb for content sites and apps; one custom property swaps the separator shape.
Live Demo CSS, Bootstrap & Tailwind code
2. Arrow Step Breadcrumbs
Filled arrow blocks, a graduated tint that darkens with depth, and an outlined path bar split by tall chevron lines.
The arrows are clip-path shapes behind the text with the link stretched over each one, for hierarchies that deserve more visual weight.
Live Demo CSS, Bootstrap & Tailwind code
3. Pill and Tag Breadcrumbs
Separate rounded chips, a segmented track with the current level raised, and luggage tags with a punched hole.
Choose these where the interface already uses pill buttons or where the path is really a set of categories.
Live Demo CSS, Bootstrap & Tailwind code
4. Breadcrumbs with Icons
A home icon in place of the first level, an icon on every level for file paths, and an outlined bar with a count badge.
Icons are inline SVGs hidden from screen readers, and icon-only links keep a visually hidden name.
Live Demo CSS, Bootstrap & Tailwind code
5. Collapsing Breadcrumbs
A native details menu for the hidden middle levels, a container query that turns the trail into a back link, and truncated long labels.
Use them for deep hierarchies such as documentation, file stores and account areas, and for breadcrumbs that live in narrow columns.
Live Demo CSS, Bootstrap & Tailwind code
6. Page Header Breadcrumbs
Complete page headers with a breadcrumb above the h1: an app header with actions, an article hero band and a record header with a back button.
Drop them in at the top of a page; the layout wraps on phones without media queries.
Live Demo CSS, Bootstrap & Tailwind code
7. Dark Breadcrumbs
A glass bar, a glowing current level and dark arrow steps, with colours checked against a near-black page.
Made for consoles, media apps and dark dashboards where light-theme greys lose their contrast.
Live Demo CSS, Bootstrap & Tailwind code
8. Modern CSS Breadcrumbs
Popover menus for collapsed levels and sibling switching, placed with CSS anchor positioning, plus a :has() trail highlight.
Everything a dropdown script used to do, with no JavaScript; browsers without anchor positioning show the menu as a centred panel.
Live Demo CSS, Bootstrap & Tailwind code
Frequently asked questions
Are these breadcrumbs free to use?
Yes. All eight sets are free for personal and commercial projects, including client work and products you sell. Attribution is optional but always welcome. See uicookies.com/license for the full terms.
Do the breadcrumbs need JavaScript?
No. Every set in all three versions is HTML and CSS only. The collapsed menus use a native details element or the popover attribute, and the responsive version uses a container query, so there is nothing to initialise and no library to load.
Are the breadcrumbs accessible?
Each one is a nav element with aria-label="Breadcrumb" around an ordered list, and the current page carries aria-current="page". Separators are drawn in CSS with no text, so screen readers do not announce them. Every set is checked with axe-core against WCAG 2.1 AA, shows a visible keyboard focus outline and turns off motion under prefers-reduced-motion.
Which frameworks are supported?
Each set ships as plain HTML and CSS, as Bootstrap 5.3.8 using the stock .breadcrumb component with –bs-breadcrumb-divider, and as Tailwind CSS 4 using utility classes with a few custom utilities for the separator shapes. The three versions look the same, so you can switch frameworks without changing the design.
How do I add breadcrumb structured data?
The classic set includes a BreadcrumbList JSON-LD script next to the breadcrumb. Give each level a ListItem with its position, name and URL, in the same order as the visible trail; the last item can omit the URL. Keep the script and the visible breadcrumb in sync, because search engines compare the two.
More breadcrumbs from the community
Examples by other designers and developers, collected before we built our own set. Each links to its original source.
Bootstrap Breadcrumb CSS V2
You get a vertical Bootstrap breadcrumb CSS design in this Colorlib V2 template.
Since each part is treated as a part of an action, they are arranged in order. In the breadcrumbs, you can add text, and if you want, you can even add icons. The selected part is highlighted in yellow to let the user know which part they are currently in. Along with the breadcrumb design, you also get a registration form. Since this whole design is for room or table reservations, the form includes elements related to them. To have a hotel website template with more useful elements like this, take a look at our free hotel website templates list.
Responsive Breadcrumbs CSS- v3
If you are looking for a responsive breadcrumbs CSS template with a creative design for your modern website, this is it.
The creator of this design has used a hexagonal shape to indicate each section. The designer has also used a cool gradient color scheme alongside creative shapes. You can use this design as is in your event website template to add extra richness. To give you a better idea, the creator has used an event registration concept in this design. You can either use the breadcrumb design alone or the entire event registration wizard design.
Bootstrap Breadcrumb Arrow
Bootstrap arrows are used differently in this breadcrumb design to deliver a visually appealing, user-friendly experience.
The creator of this design has combined both conventional and modern designs. The breadcrumbs have the usual tag shape but are arranged vertically. Tag-shaped breadcrumbs are made large enough to accommodate bolder text so the user can easily read the content. Since more than half of website traffic comes from mobile devices, making web elements larger will make it easier for users to interact with your design. In this design, the color and grayscale concepts are also applied to complete and incomplete tasks, respectively. If you are using a sticky sidebar and vertical navigation system, this design will be helpful.
Colorlib Wizard 8
Unique breadcrumbs CSS design for web applications and wizards.
You can use icons instead of using the same text design in your breadcrumbs. The latest versions of CSS3 and HTML5 allow us to create more lively designs. Colorlib Wizard 8 is one example of modern web design that effectively uses the latest web development features. Since this design is made for organic and agriculture-related websites, you get a fresh green color scheme. Each section part is denoted by an icon. Another best part of this free template is that the download includes all the assets used in this design, like icons and fonts. Along with the breadcrumb design, you also get a mini checkout page. Take a look at our free eCommerce website template collection for more creative online store designs.
Colorlib Wizard 11
Colorlib Wizard 11 is almost similar to the breadcrumb design in Wizard 8 mentioned above. In this design, you get a boxy element with rounded edges instead of the creative elliptical shape that you have seen in Wizard 8. The creator has given you the option to add both icons and text in this breadcrumb design. All the icons used in this design are clean and simple, making them suitable for all types of websites. If you have special requirements, you can either go for Font Awesome icons or other free icons. Since this demo is based on a conditional sequence, you cannot jump between the sections. But you can change this behavior based on your design needs.
Dynamic Breadcrumb Bootstrap – v15
Colorlib Wizard 15 is another vertical breadcrumb design. In this example, the developer has chosen a bank account registration process. Since it is a professional website, keeping things clear and simple is a must. In the breadcrumb, you can add text and a number. The process runs conditionally; you can only move between completed sections. Other useful features in this design are interactive sliders, neat forms, and a search input box. If you are designing banking or financial websites, take a look at our free bank website templates list to finish your project on time.
Colorlib Wizard 14
You get a normal boxy breadcrumb in this design. The simple design of this breadcrumb makes it easy to fit into any website or mobile application. On the clean white layout, the breadcrumb at the top clearly shows which page or section the user is on. A bright green color scheme is used in this design. Since this template uses the latest CSS3 framework, the colors look more natural and attractive. In the default design, you get a profile registration process design. If you are making a job directory website, this design will come in handy. Check out our free dashboard website template collection to get more useful interactive elements like this.
Colorlib Wizard 16
Colorlib Wizard 16 is almost similar to the version 14 design mentioned above. But in this one, you get clearly segmented breadcrumbs at the top. With the simple, clean, minimal design, the developer clearly shows at each phase the user is in the process. Since this breadcrumb is used in a conditional phase, you can use it to switch between tabs only after completing the tabs. If you are using the breadcrumb design for other purposes, you can customize it in the code script. The developer has not only kept the design simple, but also kept the code simple for easier customization.
Colorlib Wizard 26
Instead of treating the breadcrumbs as a text link, the creator of this template has treated them as a CSS button. Each breadcrumb button is made big enough to let you add bigger texts. Since it is a wizard-based design, shadow effects are used smartly to highlight the numbers. But you can use this space to add icons or other elements you like. The completed parts are shown in color, and the incomplete parts are shown in grayscale. CSS3 script is used in this design, so you get smooth transition effects and an attractive color scheme. By making a few changes, you can use this breadcrumb in your design.
Colorlib Wizard 20
Colorlib Wizard 20 is a breadcrumb design for mobile applications and wizards. With simple circle and horizontal line elements, the creator has given you a neat breadcrumb design. Since this one is designed for smaller screen real estate, it will fit easily on any part of the website. At the top of each circle, you have space to add your text. Text is made larger and bolder so users can easily read and interact with your design. The developer has kept the code structure simple for quick and easy customization. You can even use this design on your existing website with a few customizations.
Colorlib Wizard 1
Colorlib Wizard 1 has simple circular breadcrumbs. As the name implies, these breadcrumbs are designed for wizards, but you can use them for other elements as well. Animated vertical lines indicate the transition to the next step. The whole wizard is built with modern HTML5 and CSS3, so you can customize the animation effects. If you are using the breadcrumbs for the sliders or carousels, this design would be the best fit. Take a look at our CSS slider collection for more interactive transition effects and designs. Along with the breadcrumbs, you also get other elements in this design. Pick the one you like and make your custom design.
Colorlib Wizard 23
In this breadcrumbs CSS example, we get a design for a payment processing wizard. The creator has used icons and smooth animation effects to show which part of the process the user is currently in. Along with the breadcrumbs CSS design, you also get beautiful forms with this template. All the options and features are fully functional in this HTML template. By using this template, you can set up a wizard in no time. All you have to do is handle the backend integration. This versatile design can be used on almost any type of form or webpage.
Colorlib Wizard 22
Breadcrumbs in this design are primarily made for the forms. So the breadcrumbs are small and easy for users to access. If you are looking for small breadcrumbs CSS designs, this one would be a good choice. The creator has used colors to indicate which page or step the user is on. One small flaw in Wizard 23 is that the progress line won’t go back when you move backward. But in this breadcrumb design, the progress indicator moves to the page or step you are in. It is just a small detail, but it matters a lot when you use it publicly.
Material Design CSS Breadcrumbs
This example provides simple, neat CSS breadcrumbs that use material design concepts.
The beauty of the material design is that it delivers elegant-looking, functional elements. All five concepts in this example are very simple and can be used easily throughout the website. Some CSS breadcrumbs use hover animations to deliver an immersive experience when users interact with them. Since the animations are designed with the latest CSS3, you can be creative and add a few custom animations to give the design your personal touch.
Vertical Breadcrumbs & Tabs
This example will be a good option for those who want unique responsive breadcrumb CSS designs.
You can infer that this breadcrumbs CSS design is a hybrid of the breadcrumb and tab concepts. When you move from one screen to another, the previous screen becomes a breadcrumb and stays as a tab in the left corner of the screen; therefore, users can access it without having to keep pressing the back arrow. You can also use this breadcrumb CSS design in mobile UIs because of its smart, compact nature.
CSS Breadcrumbs
The breadcrumbs are moved to the bottom of the screen in this CSS breadcrumb design concept. Smooth transition animations are used on the main page when the user jumps from one breadcrumb to another. If you want your users to quickly access all tabs via breadcrumbs, this design is a good choice. You can even label the breadcrumbs, which will greatly improve the user experience. Overall, this CSS breadcrumb is a simple, practical concept.
Breadcrumb Navigation Example
You get six different navigation bar examples in this pack. Both simple and extra customized breadcrumb navigation bar designs are there in this pack. Since it is a set of simple HTML breadcrumbs, the code snippet is straightforward. The creator has maintained a clean code structure, making it easy to find elements and their properties. You can edit and visualize the results on the CodePen editor itself.
List of cool HTML Breadcrumbs
The creator, Mike, has given us nine different HTML breadcrumbs with a cool CSS design. Both text-only and icon-based breadcrumbs are included in this pack, making this code snippet a useful option for developers. The default breadcrumb design is very simple, so that you can use it on any professional website or application. More than ample space is provided between each breadcrumb, and clear, legible fonts are used to make the interaction easier. Overall, this breadcrumb set offers a collection of professional breadcrumb designs.
Credit Card Checkout
Credit Card Checkout is a concept design that uses breadcrumbs for tab navigation. Though the concept and the checkout tab look good, you need to make the breadcrumbs interactive. If you are looking for an interactive checkout process for your application or online store, this one might give you inspiration. You can take this design as a base and create your interactive breadcrumb design. Speaking of online stores, look at our retina Shopify themes collection for fully functional and easy-to-set-up online stores.
Breadcumbs CSS
The creator, Fazlul Karim, has given us a simple and neat-looking breadcrumb design. Because of this simple structure, you can use this breadcrumb design for all websites and applications. Hover effects are used smartly to indicate which part the user will choose. Since the design is made purely using the CSS3 script, you can easily add other effects and design elements to this design.
Imageless CSS3 menu
One of the biggest advantages of the latest CSS3 script is that you can design any type of design easily. In this example, the creator has used breadcrumbs with concave edges, unlike the standard CSS breadcrumbs. Hover effects and bright colors are used effectively to clearly indicate which option the user will choose. Fundamentals are done properly in this design; hence, you can easily edit and use the code in your project or application design. The code script is simple and still has enough room to add the custom features and options you want.
Product Page Breadcrumb
This is a simple breadcrumb design you might have seen on many websites. Because of this breadcrumb’s simple, straightforward design, users can easily interact with it. The selected page is neatly highlighted among the other page links in the breadcrumb, so the user can easily identify the page they are on at a glance. Since the creator has given a complete product page in this example, the code includes many elements. You can use the breadcrumb design alone and edit it as needed.
Simple Transform Skew Breadcrumb
As the name implies, the creator has used skew shaped breadcrumbs in this example. Subtle hover effects are used in this breadcrumb design to make the interaction easier. The code script is very clean and simple. An uncomplicated color transformation effect in this effect looks elegant. You can use other types of hover effects if you want. For more inspiration, take a look at our hover effects design examples collection. Since this design’s code script is shared with you on the CodePen editor, you can edit and visualize the results on the editor.
Angular stepper
This one is a simple vertical breadcrumb design concept. As the name implies, the creator has used a few lines of AngularJS script to make the animation fluid. But you can trim the code as needed. Users can easily jump to the pages or sections by simply clicking the corresponding breadcrumb link. You get a next and previous button in the default design; you can keep it if you want, or you can simply replace it with the corresponding link. The versatility of this design makes it a good option for both web and application design.
Breadcrumb Form Pagination
The breadcrumb design in this example is a good option for form wizards and similar purposes. Clean, content-focused breadcrumbs in this design let the user quickly understand which page or step they are on. Previous and upcoming steps are also shown in this breadcrumb design, so users can get a clear idea of the information they need to continue the process. The code script is clean, just like the design to let you easily edit and add the features you want.
Expandable Breadcrumbs
It is an accordion-style breadcrumb design. On hovering over the breadcrumb, it expands to show the complete text. If you fee the texts are a bit longer than the breadcrumb space, designs like this might help you. The developer has HTML5 and CSS3 script, hence the transition and animation effects are fluid and simple. Both the texts and breadcrumb shape are balanced equally so that you get a clean professional look. The entire code script is shared in the CodePen editor, hence you can visualize your customization results before using it on your website or project.
Tiny CSS3 Round Breadcrumb
The Tiny CSS3 Round Breadcrumb is almost identical to the Expandable Breadcrumbs design mentioned above. But in this design, you get rounded spherical-shaped breadcrumbs. The developer has given you space for both icons and texts in this design. Another advantage of this design is that it is built entirely with HTML and CSS. Hence, you have plenty of customization options and the integration part will also be easy. The accordion-style expansion is smooth so that the user no need to wait long for the option to appear. For more creative accordion design, take a look at our CSS accordion collections designed by professional developers.
Breadcrumbs With Smart Ellipsis
In this design, you get a normal regular style breadcrumb design. A smooth, floating-style animation is used for the hover effect. Ample space is provided between each option so the user can easily interact with them. Texts are also made big enough for better readability. Making web elements and text larger will improve the mobile user experience. This breadcrumb design is also built with HTML5 and CSS3. This clean design can be used for applications, forms, and even on website breadcrumbs. You can use this design on your existing website or project with a few optimizations.
Breadcrumbs By Dany Santos
The developer Dany Santos has given us a pack of animated breadcrumb designs. Instead of putting the links simply at the top, the developer has added hover effects to make it interactive. Three types of designs are given in this set, and all of them are designed using the CSS3 script. Shadow and depth effects are used to make the selected breadcrumb distinct from the rest of the links. Though it is made with CSS3, the developer has used only white and gray. But you can add any modern color scheme to this template. These designs can be used on your website by making a few customizations.
Multi-line Pure CSS Breadcrumb Arrows
Multi-line Pure CSS Breadcrumb Arrows, as the name implies, this one has a series of tags stitched together like a design. An ample amount of space is given for each section so that you can add big and bold texts easily. Colorful hover effects indicate which section the user is using. For more creative hover effects, take a look at our CSS hover effects collection. This one is designed purely using CSS3 script, hence adding new effects and modern color schemes will be an easy job. The design and the code script are also made simple for easier integration and customizations.
Breadcrumb, Stepper Material Design Color
This one is similar to the breadcrumbs in the wizard design mentioned above. The small design of this breadcrumb makes it easy to fit into any part of websites and applications. As the name implies, this one uses a material color scheme that looks very attractive. Since modern mobile screens are very vibrant, colorful elements will look more attractive. To give you a smooth animation experience, this design uses CSS3 and JavaScript. Since the given animation effect is very simple, you can trim the code structure based on your needs. Check the info link below to have a hands-on experience on the code.
Collapsed Breadcrumbs
Collapsed breadcrumbs design helps you save screen space used by the breadcrumbs. If your web pages contain a lot of content, elements like this will make them look cleaner. Apart from the collapsing animation, the breadcrumb design is kept very simple. Since texts are the main design element, they are made larger and bolder to facilitate interaction. The underline effect is used in the hover state to indicate which section the user is using. Like most other breadcrumbs on this list, this one is made with the CSS3 script.
Pure CSS3 Breadcrumb Navigation
Pure CSS3 breadcrumb navigation is another ribbon-style breadcrumb navigation system. In this design, the developer has given you both a light and a dark version. Each breadcrumb section provides ample space for both text and icons. Since it is a demo, the breadcrumb is smaller, but you can resize and even reshape it to fit your needs. Speaking of ribbons, take a look at our CSS ribbon collection to make the ribbon design more attractive.
Flat CSS3 Breadcrumb
Flat CSS3 Breadcrumb is another version of the Breadcrumb navigation design mentioned above. In this one, you can add icons and text. For demo purposes, the developer has used Font Awesome icons. If you have your own icon set, you can use it here. Using Font Awesome gives you a properly optimized icon that performs well on all major browsers. The developer has shared the code structure in the CodePen editor. Hence, you customize the code and visualize it in the CodePen editor before using it on your website or project.
Simple Breadcrumbs CSS
The creator, Nadia Degtyareva, has designed a simple breadcrumb layout. You can easily fit this breadcrumb design on your webpages, forms, and in the wizards. Just like the design, the code script for this breadcrumb design is also clean and simple. Even beginners can understand the code and utilize it in their designs. Mostly CSS is used to create this design; hence, altering the code and using it in your design will be easy. The hover effects are handled smartly so that the numeric circles do not change colors when you hover over the breadcrumbs.
