Csináljunk egy egyszerű szerkezetű, kis méretű, és könnyen felhasználható breadcrumbs navigációt:

Lista szerkezetet fogunk alkalmazni, úgy hogy az aktuális oldalt nem linkeljük.

HTML kód

<ul id="crumbs">
	<li><a href="#">Főoldal</a></li>
	<li><a href="#">Szolgáltatások</a></li>
	<li><a href="#">Árvíztűrő szolgáltatás</a></li>
	<li>Leírás</li>
</ul>

Látszik, hogy a listánkból, csak az ul kap egy ID-it, a többi elemet ezen keresztül fogjuk megszólítani css-ből.

CSS kód

Először is kinullázzuk az ul és li elemeket.

ul, li {
	margin: 0;
	padding: 0;
	list-style: none;
}

Ezután jöhet a #crumbs elemünk, aminek adunk egy border tulajdonságot, megadjuk a szélességét és a magasságát.

#crumbs {
	border: 1px solid #CCC;
	height: 30px;
	width: 580px;
}

Most formázzuk meg az ul-ben lévő li elemeket. Ugye ennek nem kell adni külön szelektort, mivel az ul-nek már adtunk, így azon keresztül megszólíthatjuk.

A float-olás azért kell, hogy egymás mellé kerüljenek a li elemek, megadjuk a magasságát, a sorközt (line-height), ami azért kell, hogy ne kelljen belső margót használnunk majd a linknél, mert akkor nem látszana a háttérkép. Viszont nem tudjuk teljesen elkerülni a belső margó használatát, a link nélküli li elem miatt. Ahhoz hogy bal oldalról távolságot tartsunk, kell adni neki egy padding-left tulajdonságot, így ez közvetve a linkre is igaz lesz.

#crumbs li {
	float: left;
	height: 20px;
	line-height: 30px;
	padding-left: 10px;
}

Most megformázzuk az a elemünket. Blokk szintű elemmé kell tenni, hogy az a teljes felületén kattintható legyen. Itt is megadjuk a magasságát, ami jelen esetben 30 pixel. Jobb oldalról kell adni neki egy belső margót, hogy a háttérképre ne lógjon rá. Végezetül megadjuk neki a háttérkép útvonalát, azt hogy ne ismételje, majd a jobb-közép igazítást.

#crumbs li a {
	display: block;
	height: 30px;
	padding-right: 10px;
	background: url(img/crumbs.png) no-repeat right center;
}

Ahhoz hogy felhasználóbarát dolgot hozzunk létre, adjunk a linknek színt, és aláhúzással jelöljük hogy az bizony kattintható…

#crumbs li a {
	text-decoration: underline;
	color: #666;
}

…majd csináljunk hover állapotot is neki, hogy a felhasználóval érzékeltessük: “ha rám kattintasz, valami történni fog”.

#crumbs li a:hover {
	color: #0C6;
}