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.
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.