Le fil d’Ariane ou breadcrumb
Le fil d’Ariane ou breadcrumb sert aux utilisateurs et moteurs de recherche à se repérer dans l’arborescence d’un site. Il permet de rapidement comprendre où se situe une page par rapport aux autres.
On va pouvoir créer un fil d’Ariane avec Bootstrap en ajoutant la classe .breadcrumb
à un élément nav
et à un élément de liste ainsi que la classe .breadcrumb-item
aux différents éléments composant notre fil d’Ariane.
See the Pen
Bootstrap 4.4.1 by Pierre (@pierregiraud)
on CodePen.
La pagination
Pour mettre en place un système de pagination, on va déjà utiliser un élément de liste ul
auquel on va ajouter une classe .pagination
.
Ensuite, nous allons rajouter des classes .page-item
à chaque élément de liste et des classes .page-link
pour chaque lien contenu dans les éléments de liste.
Une bonne pratique consiste à imbriquer un système de pagination dans un élément nav
auquel on passera un attribut aria-label
pour préciser son rôle afin d’aider les liseuses d’écran à comprendre ce composant.
See the Pen
Bootstrap 4.4.2 by Pierre (@pierregiraud)
on CodePen.
On peut changer l’alignement de la pagination avec les classes .justify-content-*
.
Le repérage dans la page
Le composant scrollspy (« espionage de défilement ») permet d’ajouter dynamiquement une classe .active
à un élément de liste ou de navigation en fonction de la position de l’utilisateur dans la page, c’est-à-dire selon le défilement de la page.
Cela peut permettre de mettre en relief un élément de sommaire par exemple pour indiquer à l’utilisateur où il en est dans la page.
Pour mettre en place le scrollspy, nous allons déjà devoir ajouter un attribut data-spy="scroll"
à un élément contenant la partie de la page dans laquelle on peut défiler. Cet élément doit avoir une position: relative
. Nous allons ensuite ajouter des id
aux différents éléments de cette partie pour pouvoir se repérer.
Ensuite, on ne va pouvoir utiliser le composant scrollspy qu’avec des groupes de liste ou un composant de navigation. Ces groupes de liste ou composant de navigation devront contenir des éléments a
avec des attributs href
composés d’un #
suivi du nom d’un id
comme pour des liens de type ancre.
See the Pen
Bootstrap 4.4.3 by Pierre (@pierregiraud)
on CodePen.