Les autres composants de navigation Bootstrap : breadcrumb, pagination et scrollspy

Bootstrap nous permet de créer davantage de composants aidant à la navigation comme un fil d’Ariane, un système de pagination, ou encore une aide au défilement pour nos pages web.

 

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.

Laisser un commentaire