35+ CSS Breadcrumbs - Free Code + Demos
Collection of 35+ CSS Breadcrumbs. All items are 100% free and open-source. The list also includes simple css breadcrumbs, responsive, and multiline.
1. CSS Cutup Breadcrumbs
Today, I would like to share with you how to make a Breadcrumbs. Breadcrumbs show the hierarchy of content between the site's root and the user's current location.
Author: nana (nana8)
Links: Source Code / Demo, Article
Created on: October 3, 2018
Made with: HTML, SCSS
Tags: breadcrumb bar, breadcrumbs, navigation, schema, breadcrumblist
2. Vertical Breadcrumb
Author: Chris Jahn (slcr)
Links: Source Code / Demo
Created on: April 30, 2018
Made with: Pug, Stylus
CSS Pre-processor: Stylus
JS Pre-processor: None
HTML Pre-processor: Pug
3. Breadcrumb With Dropdown Navigation
Saw an example of a dropdown inside a breadcrumb navigation so I replicated it as simple as possible (using bootstrap for base/generic styles) so it would be easy to replicate.
Author: Kevin Konrad Henriquez (kkhenriquez)
Links: Source Code / Demo
Created on: February 27, 2018
Made with: HTML, SCSS, JS
Tags: css, navigation, breadcrumb, bootstrap, dropdown
4. Breadcrumbs With "Smart" Ellipsis (flex)
Author: Yonatan Shippin (shippin)
Links: Source Code / Demo
Created on: September 18, 2017
Made with: HTML, SCSS
5. Breadcrumbs Navigation
Author: Andreas Storm (andreasstorm)
Links: Source Code / Demo, Dribbble.com
Created on: August 14, 2017
Made with: HTML, Stylus
Tags: navigation, breadcrumbs, only-css
6. Breadcrumb With CSS Custom Properties As API
Author: Stas Melnikov (melnik909)
Links: Source Code / Demo
Created on: June 14, 2017
Made with: HTML, CSS
Tags: custom properties, css, breadcrumbs
7. Multi-line Pure CSS Breadcrumb Arrows
Author: Glynn Smith (iamglynnsmith)
Links: Source Code / Demo
Created on: May 20, 2017
Made with: HTML, SCSS
8. Untitled
Author: Phelipe M Peres (mestremind)
Links: Source Code / Demo
Created on: October 3, 2013
Made with: HTML, SCSS, JS
9. Breadcrumb, Progress Tracker, Stepper (Material Design Color)
Author: Shyam Chen (Shyam-Chen)
Links: Source Code / Demo
Created on: July 30, 2015
Made with: Pug, Stylus, TypeScript
CSS Pre-processor: Stylus
JS Pre-processor: TypeScript
HTML Pre-processor: Pug
Tags: jade, stylus
10. Collapsed Breadcrumbs
A list of breadcrumbs collapsed down to show only preview text for all but the current page, with full text shown on hover/focus.
Author: Skye (fraddski)
Links: Source Code / Demo
Created on: March 3, 2015
Made with: HTML, CSS
Tags: breadcrumbs, collapse, hide
11. Tiny CSS3 Round Breadcrumb
Author: Renaud Tertrais (renaudtertrais)
Links: Source Code / Demo
Created on: October 4, 2013
Made with: HTML, SCSS, JS
Tags: flat, css3, design, breadcrumb, ui
12. Untitled
Author: Phelipe M Peres (mestremind)
Links: Source Code / Demo
Created on: October 3, 2013
Made with: HTML, SCSS, JS
13. Tiny CSS3 Round Breadcrumb
Author: Renaud Tertrais (renaudtertrais)
Links: Source Code / Demo
Created on: October 4, 2013
Made with: HTML, SCSS, JS
Tags: flat, css3, design, breadcrumb, ui
14. Pure CSS3 Breadcrumb Navigation
breadcrumb navigation using pure CSS3
Author: Arkev (arkev)
Links: Source Code / Demo
Created on: April 16, 2013
Made with: HTML, CSS, JS
Tags: css3, breadcrumb, navigation
15. Force Framework Breadcrumb Style Modified CSS
Force Framework breadcrumb style, easily integration with HTML/CSS themes & application #ForceFramework @mrdogra007
Author: Nishant Dogra (mrdogra007)
Links: Source Code / Demo
Created on: November 13, 2017
Made with: HTML, CSS, JS
Tags: breadcrumb, bootstrap, ui elements, css
16. Expanding Breadcrumb Nav
Author: Altitude (altitudems)
Links: Source Code / Demo
Made with: HTML, SCSS
17. Flat CSS3 Breadcrumb
Author: Renaud Tertrais (renaudtertrais)
Links: Source Code / Demo
Created on: September 30, 2013
Made with: HTML, SCSS, JS
Tags: css3, breadcrumb, flat, design, css
18. CSS Triangle Breadcrumbs
Author: CSS-Tricks (css-tricks)
Links: Source Code / Demo
Created on: December 17, 2016
Made with: HTML, CSS
19. List Of Cool Breadcrumb Styles
Author: Mike (menshinobi)
Links: Source Code / Demo
Created on: April 6, 2016
Made with: HTML, CSS
20. Responsive Multi Step Indicator - CSS
First test of a multi-step indicator that has special use case for my job. Built using basic flex box. I need to figure out how to remove the small gap between each step's :before and :after.
Author: Brent Miller (BrentWMiller)
Links: Source Code / Demo
Created on: August 17, 2016
Made with: HTML, SCSS
Tags: multi-step indicator, flex, multistep, multi step, responsive
21. Breadcrumb Form Pagination
Author: Nicola (nicolajade)
Links: Source Code / Demo
Created on: November 3, 2014
Made with: HTML, CSS
22. Breadcrumbs List
By darkening the background color in the list on the right, I expressed that we were diving deep into the site.
Author: RYO (Mryoo)
Links: Source Code / Demo
Created on: June 13, 2019
Made with: HTML, CSS
Tags: breadcrumbs, nav, menu, progress, seo
23. Breadcrumbs
SCSS初心者です。パンくず作ってみました。コードも随時改良予定。
Author: Rabbi🐰 (_rn1873)
Links: Source Code / Demo
Created on: June 2, 2020
Made with: HTML, SCSS
Tags: breadcrumbs, scss, ui
24. Breadcrumb Nav
Author: Tom English (sterion)
Links: Source Code / Demo
Created on: August 20, 2017
Made with: HTML, CSS
Tags: breadcrumb, navigation, css, breadcrumbs, menu
25. Arrows Breadcrumbs Css
Author: rinatoptimus (rinatoptimus)
Links: Source Code / Demo
Created on: July 13, 2017
Made with: HTML, SCSS
Tags: arrow, breadcrumbs, css
26. Breadcrumb With CSS Custom Properties As API
Author: Stas Melnikov (melnik909)
Links: Source Code / Demo
Created on: June 14, 2017
Made with: HTML, CSS
Tags: custom properties, css, breadcrumbs
27. Demo: Document View (Breadcrumbs & Pagination)
Author: Opus2 (opus2)
Links: Source Code / Demo
Created on: June 23, 2016
Made with: HTML, SCSS, JS
28. Animated Breadcrumbs
click to go along the way. see what you may find :)
Author: gcyrillus (gcyrillus)
Links: Source Code / Demo
Created on: June 22, 2013
Made with: HTML, CSS
Tags: keyframe, css3, outline, border
29. Breadcrumbs W/ Nice CSS Arrows
Author: Eric Porter (EricPorter)
Links: Source Code / Demo
Created on: May 27, 2016
Made with: HTML, SCSS
Tags: css, breadcrumbs, arrows
30. CSS Breadcrumbs V3
Author: Robert Herring (rherring)
Links: Source Code / Demo
Created on: April 17, 2015
Made with: HTML, SCSS
Tags: breadcrumbs, css, purecss
31. [Prototype] Breadcrumbs
![CSS Breadcrumbs - [Prototype] Breadcrumbs](https://cdn.cactal.app/website-assets/hHpa1kx0vUE_JmdbEc5nY.png)
Basic breadcrumb concept and styling.
Author: Zywave Team (ZywaveTeam)
Links: Source Code / Demo
Created on: October 28, 2014
Made with: HTML, SCSS
Tags: breadcrumbs, ui, component, scss, sass
32. Sassy Breadcrumbs
Using Sass to make pretty breadcrumbs. Concept for a client site, unused.
Author: Sarah Wulf (slwulf)
Links: Source Code / Demo
Made with: HTML, SCSS
33. Chevron Breadcrumbs
Author: Bryan Levay (thousand)
Links: Source Code / Demo
Created on: November 6, 2013
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: breadcrumbs, nav, css3
NEW 🔥 Idea to UI/UX Design In Seconds With AI 🔥
👉 Click to try it for free: UXCanvas.ai
More Awesome Lists:
Share: