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

Be Sociable, Share!

• 

Related posts:

1. Breadcrumbs The AmR WordPress Breadcrumb navigation widget plugin is available here. Features: Uses listed items with minimal markup. The markup is...
2. Subscribe2 Widget Form – an alternate The wordpress subscribe 2 plugin is great – however the form in the widget bothers me. I have raised this ...
3. Subscribe2 widget markup and css Please refer to updated instructions. The wordpress subscribe 2 plugin is great. Version 4.9 just released – a wonderful alternative...
4. Layout Generator The CSS Layout generator generates tableless CSS only layouts or grids that have A-grade browser support. Unlike Yahoo Grids it...
5. CSS for horizontal tab menus I am having some fun (not!) in finalising some clean elegant css examples for my tab menu widget. I’m fussy...