Breadcrumbs with increasing indentation

A vertical use of the Breadcrumb widget

Indented Breadcrumbs

A query was received from Kim for  http://metakosmia.dk, asking how to indent successive levels of the breadcrumb widget links.  This was not possible in version 1.1, so version 1.2 has been released with css classes added for each breadcrumb indicating it’s depth in the menu.  This css class allows you then to assign your own styling to the levels.

Example CSS:

#amr-breadcrumb .lvl2{ padding-left: 1em;}
#amr-breadcrumb .lvl3{ padding-left: 2em;}
#amr-breadcrumb .lvl4{ padding-left: 3em;}

HTML generated:

HTML generated

Related posts:

1. AmR Breadcrumbs The AmR WordPress Breadcrumb navigation widget plugin is available here. Features: Uses listed items with minimal markup. The markup is...
2. AmR Horizontal Tabs The Tab menu widget is available. I am still fiddling around with some more css demonstration examples. This is what...
3. WordPress Breadcrumb Widget Released First of a series of widgets is a breadcrumb navigation widget, that offers a default “apple.com” like style, with minimal...
4. Subscribe2 Widget Form – an alternate The wordpress subscribe 2 plugin is great – however the form in the widget bothers me. I have raised this ...
5. Layout Generator The CSS Layout generator generates tableless CSS only layouts or grids that have A-grade browser support. Unlike Yahoo Grids it...