grimboite/articles/dev/2013-03-08-breadcrumb-css.md

Title	Date	Tags	Slug
Breadcrumb en CSS	2013-03-08	css, html	css-breadcrumb

En vrac, un petit style pour définir facilement un breadcrumb en css:

ul.breadcrumb
{
    margin-bottom: 20px;
    padding: 10px;
    background-color: rgb(245, 245, 245);
    border: 1px solid rgb(227, 227, 227);
}

ul.breadcrumb li
{
    display: inline;
}

ul.breadcrumb li:after
{
    content: " » ";
}

ul.breadcrumb li:last-child:after
{
    content: "";
}

L'idée est super simple: il suffit de définir une liste non-ordonnée et ses éléments de manière classique, et définir la classe 'breadcrumb' sur l'élément ul. Le display: inline; sur les éléments li les affichera sur une seule ligne (obviously), et les pseudo-éléments :after et :last-child:after définiront la séparation.

<ul class="breadcrumb">
    <li>Mon premier element</li>
    <li>Le second element</li>
    <li>Le troisieme</li>
    <li>Et le dernier.</li>
</ul>

Le résultat final donnera quelque chose comme :

Mon premier element » Le second element » Le troisieme » Et le dernier.

Attention que ceci pourrait ne pas fonctionner sur certains navigateurs (testé sur IE > 7, FF, Chrome et Safari quand même)...