Collection of free HTML and CSS breadcrumb navigation code examples (simple, responsive, multiline, collapsed, etc.) from codepen and other resources. Update of December 2019 collection. 5 new items.

Related Articles

  1. Bootstrap Breadcrumbs
Demo image: Breadcrumbs Designs

Author

  • CodingDecoding

Made with

  • HTML / CSS

About a code

Breadcrumbs Designs

Breadcrumbs designs (skewed, border-radius, click effect).

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • alphardex

Made with

  • HTML / CSS

About a code

Breadcrumb

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • The Wizard of Oz

Made with

  • HTML / CSS

About a code

Breadcrumbs –°omponent

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Breadcrumb Experiment

Author

  • smooto

Made with

  • HTML / CSS

About a code

Breadcrumb Experiment

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • David Lewis

Made with

  • HTML / CSS

About a code

Refactoring UI - Breadcrumbs

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: CSS Cut-Up Breadcrumbs

Author

  • nana

Made with

  • HTML / CSS (SCSS)

About a code

CSS Cut-Up Breadcrumbs

Breadcrumbs show the hierarchy of content between the site's root and the user's current location.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Vertical Breadcrumb

Author

  • Chris Jahn

Made with

  • HTML (Pug) / CSS (Stylus)

About the code

Vertical Breadcrumb

Simple CSS vertical breadcrumbs.

Demo image: Breadcrumb With Dropdown Navigation

Author

  • Kevin Konrad Henriquez

Made with

  • HTML / CSS (SCSS)

About the code

Breadcrumb With Dropdown Navigation

Feel free to customize it to your own way. Colors, sizes, shadows, borders, etc. Made with Bootstrap.

Demo image: Breadcrumbs with 'Smart' Ellipsis (Flex)

Author

  • Jonathan Shippin

Made with

  • HTML / CSS (SCSS)

About the code

Breadcrumbs with 'Smart' Ellipsis (Flex)

Play with the browser size to see how the breadcrumbs behave when there's no room left for them.

Demo image: Breadcrumbs Navigation

Author

  • Andreas Storm

Made with

  • HTML
  • CSS/Sass

About the code

Breadcrumbs Navigation

This example shows what happens as a user gets closer to the back button. The breadcrumbs expand and allow the user to navigate to almost anywhere else in the course while only having minimal impact on space.

Demo Image: CSS Breadcrumbs
Demo Image: CSS Breadcrumbs

CSS Breadcrumbs

Breadcrumbs with CSS custom properties as API.
Made by Stas Melnikov
June 15, 2017

Demo Image: Multi-line Breadcrumb Arrows
Demo Image: Multi-Line Breadcrumb Arrows

Multi-Line Breadcrumb Arrows

Adaptive multi-line pure CSS breadcrumb arrows.
Made by Glynn Smith
May 30, 2017

Demo Image: Breadcrumbs
Demo GIF: Breadcrumbs

Breadcrumbs

HTML and CSS breadcrumbs.
Made by Dany Santos
July 15, 2016

Demo Image: Breadcrumb, Progress Tracker
Demo Image: Breadcrumb, Progress Tracker

Breadcrumb, Progress Tracker

Material Design breadcrumb, progress tracker.
Made by Shyam Chen
July 30, 2015

Demo Image: Collapsed Breadcrumbs
Demo Image: Collapsed Breadcrumbs

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.
Made by Skye
March 4, 2015

Demo Image: Responsive Breadcrumbs
Demo Image: Responsive Breadcrumbs

Responsive Breadcrumbs

Pure CSS responsive breadcrumbs.
Made by Oliver Knoblich
April 2, 2014

Demo Image: Tiny CSS3 Breadcrumb
Demo GIF: Tiny CSS3 Breadcrumb

Tiny CSS3 Breadcrumb

Tiny CSS3 round breadcrumb.
Made by Renaud Tertrais
October 4, 2013

Demo Image: Expandable Breadcrumbs
Demo Image: Expandable Breadcrumbs

Expandable Breadcrumbs

Perfect for pages with long titles.
Made by Phelipe M Peres
October 3, 2013

Demo Image: Flat CSS3 Breadcrumb
Demo Image: Flat CSS3 Breadcrumb

CSS3 Breadcrumb

Flat HTML and CSS3 breadcrumb.
Made by Renaud Tertrais
September 30, 2013

Demo Image: Pure CSS3 Breadcrumb
Demo Image: Pure CSS3 Breadcrumb

Pure CSS3 Breadcrumb

Breadcrumb navigation using pure CSS3.
Made by Arkev
April 16, 2013