Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
CSS Library
CSS Layouts

CSS Library: Other: Here

CSS checkout style breadcrumbs

Author: Dynamic Drive

The following CSS turns a UL list into a checkout style breadcrumbs interface. Good for ecommerce checkout or an unconventional site breadcrumb trail. Three "stages" are supported, with the presence (or lack) of a specific CSS class inside each LI:

The interface is relatively bullet proof and mobile friendly, transforming into vertical stack of breadcrumbs on small screen devices.


As you can see in the 2nd demo below,  you can also add an icon font inside each stage label to provide additional visual cues about each stage. Icon fonts courtesy of IcoMoon.

The CSS:

The above code references two icon fronts from Icomoon, served up via 4 CSS font files inside the "fonts/" sub directory. Download the following file and extract to the same directory as the current page.


Code Info

Rate this code:

Date Posted: 09/23/2015

Revision History: None

Usage Terms: Click here

Your Comments (0)

Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.

Copyright 2006-2015 Dynamic Drive Read our Usage Terms before using any of the CSS codes.