cne _LOG

Sehr schlicht ist die Brotkrumen-Navigation der apple.com-Website:

Und dieses Menü lässt sich ganz leicht per CSS selbst gestalten. Dazu verwenden wir folgendes HTML-Gerüst:

<div class="breadcrumbs">
   <a href="/">Home</a>
   <span>></span>
   <a href="/">Beispiel</a>
   <span>></span>
   <em>Breadcrumbs</em>
</div>

Bei deaktiviertem CSS wird der Aufbau deutlich:
Home > Beispiel > Breadcrumbs

Wir benutzen ein >, um die Brotkrumen von einander zu trennen. Dieser Separator wird nun per CSS mit einem PNG, das auch Apple verwendet, hinterlegt.
Apple verwendet ein DHTML-Skript (iepngfix.htc), um die PNG-Transparenz im IE zu regeln – wir begnügen uns mit den CSS-Eigenschaften opacity und filter:alpha (für den IE):

div.breadcrumbs span {
   background:url(breadcrumb.png) no-repeat left center;
   overflow:hidden;
   padding:0 0 0 10px;
   width:0;
   filter:alpha(opacity=40); /* für IE */
   opacity:0.4;
}

Unsere Apple-Brotkrumennavigation

Fertig ist die Navigation.

Einige Beispiele findet ihr auf dieser Testseite: Apple Breadcrumb. Und natürlich sind auch andere Möglichkeiten der Gestaltung gegeben.
Das gesamte Paket bestehend aus HTML, CSS und Bildern könnt ihr auch herunterladen: apple-breadcrumb.rar.

Übrigens: Eine Lösung für PNGs im IE gibt es bei Peter Kröner, PNG ohne Reue: Die definitive Lösung. Eine kleine Statistik bietet der Artikel Breadcrumb Navigation von Web Design Practises und Usability News befassen sich mit dem Nutzen der Brotkrumennavigation: Breadcrumb Navigation: Further Investigation of Usage.