Breadcrumbs en CSS

Les Breadcrumbs (littéralement miettes de pain, certainement en référence au petit Poucet) sont des aides à la navigation permettant de mieux se repérer dans une hiérarchie de pages. Ce type de navigation est graphiquement élégant et ergonomiquement intéressant. Pourquoi s'en priver.

Dans mes précédents articles, très trop souvent consacrés à jQuery, j'applique des techniques CSS sans jamais les détailler. Cet article sera le prétexte à en aborder quelques unes en créant progressivement une barre de navigation façon Breadcrumbs en pur CSS à partir d'une simple liste ordonnée.

Etape 1 : Le Html

Partons d'une simple liste ordonnée, sémantiquement idéale pour présenter des liens.

<ul id="breadcrumbs">
    <li><a href="/home">Accueil</a></li>
    <li><a href="/articles">Articles</a></li>
    <li><a href="/articles/css">Css</a></li>
    <li>Réalisation de Breadcrumbs en CSS</li>
</ul>

L'aspect est brut de fonderie.

Etape 2 : Les polices

Premier coup de peinture, on change la police, on supprimer les puces et les marges de la liste.

#breadcrumbs {
    font:11px Arial, sans-serif;
    color:#111;
    list-style:none;
    padding:0; margin:0;
}

On y voit déjà plus clair.

Etape 3 : Placement horizontal

Présentons maintenant les éléments horizontalement.

#breadcrumbs li {
    float:left;
    padding:0 10px;
} 

Float permet aux éléments de devenir flottant. Padding permet de garder un certain espace entre eux.

Etape 4 : Les liens

Les liens bleus surlignés par défaut manquent un peu de classe. On en change l'aspect.

#breadcrumbs a {
    text-decoration:none;
    color:#999;
}
#breadcrumbs a:hover {
    color:#CC6600;
}

Text-decoration:none annule tout soulignement des liens a de notre barre de navigation. Lorsque le lien est survolé (a:hover) la couleur passe de #999 à #CC6600.

Le résultat commence à être intéressant. L'ajout de quelques images fera le reste.

Etape 5 : Les images

Voici les images utilisées. La première est le fond de la barre de navigation ul. La deuxième est le fond appliqué à chaque élément li de la liste.

Commençons par la barre.

#breadcrumbs {
    font:11px Arial, sans-serif;
    color:#111;
    list-style:none;
    padding:0; margin:0;

    /* Ajout ici */
    background:url(breadcrumb-bg.png) repeat-x center;
    border:1px solid #CCC;

    border-radius:0.4em; /* Standard */
    -moz-border-radius:0.4em; /* Firefox */
    -webkit-border-radius:0.4em; /* Safari */

    overflow:hidden;
}

L'image breadcrumb-bg.png est placée en fond avec répétition horizontale, ainsi elle couvrira toute la longueur de la barre. Une bordure grise est ajoutée à laquelle on applique un arrondi. Le procédé étant un peu récent, chaque navigateur ne comprend que sa propre méthode. Une fois de plus, n'attendez rien d'Internet Explorer.

Lorsqu'un élément possède des enfants flottants, il voit sa hauteur réduite à zéro. CSS est ainsi fait. Ajouter overflow:hidden à l'élément parent permet de contrer cet étrange comportement.

Poursuivons avec les éléments li de la liste.

#breadcrumbs li {
    float:left;

    /* Ajout ici */
    background:url(breadcrumb-right.png) no-repeat right center;
    padding:0 20px 0 10px;
    height:28px; line-height:28px;
}

L'image du chevron est appliquée à droite de chaque élément li, sans répétition, après avoir pris soin d'élargir le padding pour lui donner la place de se loger. Définir un height égale au line-height permet de centrer le texte verticalement.

Etape 6 : Le bouton Accueil

Le résultat est sympa, nos Breadcrumbs pourraient déjà fonctionner ainsi. Mais pour que la barre soit plus sympa, remplaçons le lien Accueil par un icône.

L'icône est tiré d'un pack d'icônes libre de droit. Je n'en retrouve plus la provenance. Que l'auteur m'en excuse.

#breadcrumbs li:first-child a {
    display:block;
    width:30px;
    text-indent:-9999px;
    background:url(home.png) no-repeat center center;
}

Pour remplacer le contenu d'un lien par une image, il faut le passer en block puis lui allouer une largeur (ici 30px). Pour que le texte disparaisse, l'indentation text-indent est réduire à une valeur négative que le fera sortir du cadre. La place étant libre, on applique l'icône en fond.

Et voilà le travail.

Fin : Les étapes bout à bout

L'intégralité du code ci-dessous :

#breadcrumbs {
    font:11px Arial, sans-serif;
    color:#111;
    list-style:none;
    padding:0; margin:0;
    background:url(breadcrumb-bg.png) repeat-x center;
    border:1px solid #CCC;
    border-radius:0.4em;
    -moz-border-radius:0.4em;
    -webkit-border-radius:0.4em;
    overflow:hidden;
}
#breadcrumbs li {
    float:left;
    background:url(breadcrumb-right.png) no-repeat right center;
    padding:0 20px 0 10px;
    height:28px; line-height:28px;
}   
#breadcrumbs li:first-child a {
    display:block;
    width:30px;
    text-indent:-9999px;
    background:url(home.png) no-repeat center center;
}
#breadcrumbs a {
    text-decoration:none;
    color:#999;
}
#breadcrumbs a:hover {
    color:#CC6600;
}