Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library

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:

  • "completed": Gives the LI a green background with :hover style to indicate this step has been completed. Assumes a A child element inside.
  • "completing": Gives the LI a green background with NO :hover style to indicate this step is currently being completed. Assumes a SPAN child element inside.
  • No CSS class: Gives the LI a default gray background with NO :hover style to indicate this step has yet to be completed. Assumes a SPAN child element inside.

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

Demo:

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.

The HTML:

Code Info

Rate this code:

Date Posted: 09/23/2015

Revision History: None

Usage Terms: Click here

Your Comments
Copyright 2006-2016 Dynamic Drive