Pagination

Conseils

Utilisez la pagination pour répartir de grandes listes de contenu (comme des résultats de recherche) sur une série de pages. De cette façon, le contenu affiché par page demeure relativement court et facile à comprendre. Envisagez la pagination lorsqu’une liste comporte plus de 10 éléments. Elle permet à l’utilisateur de connaître le nombre total de pages, de déterminer la page sur laquelle il se trouve et de naviguer vers d’autres pages.

La pagination doit être affichée au bas de la liste de contenu.

Pagination

Première page active

Le bouton flèche « précédent » doit être masqué lorsque l’utilisateur se trouve sur la première page.

• 1
• 2
• 3
• Suivant

<ul class="gnb-pagination">
    <li><a href="#" class="active">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li>
        <a href="#" class="next" title="Suivant"><span class="visually-hidden">Suivant</span></a>
    </li>
</ul>

Pages centrales actives

Le bouton flèche « précédent » doit être activé lorsque l’utilisateur passe à la page 2 ou à une page supérieure.

• Précédent
• 1
• 2
• 3
• Suivant

<ul class="gnb-pagination">
    <li>
        <a href="#" class="previous" title="Précédent"><span class="visually-hidden">Précédent</span></a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#" class="active">2</a></li>
    <li><a href="#">3</a></li>
    <li>
        <a href="#" class="next" title="Suivant"><span class="visually-hidden">Suivant</span></a>
    </li>
</ul>

Dernière page active

Le bouton flèche « suivant » doit être masqué lorsque l’utilisateur se trouve sur la dernière page.

• Précédent
• 1
• 2
• 3

<ul class="gnb-pagination">
    <li>
        <a href="#" class="previous" title="Précédent"><span class="visually-hidden">Précédent</span></a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#" class="active">3</a></li>
</ul>

Pagination avec plus de 5 pages

La liste des numéros de page doit être tronquée lorsque le contenu s’étend sur plus de cinq pages.

• Précédent
• 1
• 2
• 3
• 4
• 25
• Suivant

<ul class="gnb-pagination">
    <li>
        <a href="#" class="previous" title="Précédent"><span class="visually-hidden">Précédent</span></a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#" class="active">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#" class="last">25</a></li>
    <li>
        <a href="#" class="next" title="Suivant"><span class="visually-hidden">Suivant</span></a>
    </li>
</ul>

Pages 5 ou plus actives

La liste des numéros de page doit être tronquée aux deux extrémités lorsque l’utilisateur se trouve sur la page 5 ou une page supérieure.

• Précédent
• 1
• 9
• 10
• 11
• 25
• Suivant

<ul class="gnb-pagination">
    <li>
        <a href="#" class="previous" title="Précédent"><span class="visually-hidden">Précédent</span></a>
    </li>
    <li><a href="#" class="first">1</a></li>
    <li><a href="#">9</a></li>
    <li><a href="#" class="active">10</a></li>
    <li><a href="#">11</a></li>
    <li><a href="#" class="last">25</a></li>
    <li>
        <a href="#" class="next" title="Suivant"><span class="visually-hidden">Suivant</span></a>
    </li>
</ul>