Interface de contrôle des tests
Retour

Pagination (pagination)

La pagination permet à l’utilisateur de naviguer entre les différentes pages d’une liste d'éléments.

Documentation

élément de navigation icône seule (par défaut)

<nav role="navigation" class="fr-pagination" aria-label="Pagination">
    <ul class="fr-pagination__list">
        <li>
            <a class="fr-pagination__link fr-pagination__link--prev" href="#">
                Page précédente
            </a>
        </li>
    </ul>
</nav>

élément de navigation avec label

<nav role="navigation" class="fr-pagination" aria-label="Pagination">
    <ul class="fr-pagination__list">
        <li>
            <a class="fr-pagination__link fr-pagination__link--prev fr-pagination__link--label" href="#">
                Page précédente
            </a>
        </li>
    </ul>
</nav>

élément de navigation avec label à partir du breakpoint LG

<nav role="navigation" class="fr-pagination" aria-label="Pagination">
    <ul class="fr-pagination__list">
        <li>
            <a class="fr-pagination__link fr-pagination__link--prev fr-pagination__link--lg-label" href="#">
                Page précédente
            </a>
        </li>
    </ul>
</nav>

pagination première page

<nav role="navigation" class="fr-pagination" aria-label="Pagination">
    <ul class="fr-pagination__list">
        <li>
            <a class="fr-pagination__link fr-pagination__link--first">
                Première page
            </a>
        </li>
        <li>
            <a class="fr-pagination__link fr-pagination__link--prev fr-pagination__link--lg-label">
                Page précédente
            </a>
        </li>
        <li>
            <a class="fr-pagination__link" aria-current="page" title="Page 1">
                1
            </a>
        </li>
        <li>
            <a class="fr-pagination__link" href="#" title="Page 2">
                2
            </a>
        </li>
        <li>
            <a class="fr-pagination__link fr-displayed-lg" href="#" title="Page 3">
                3
            </a>
        </li>
        <li>
            <a class="fr-pagination__link fr-displayed-lg">
                …
            </a>
        </li>
        <li>
            <a class="fr-pagination__link fr-displayed-lg" href="#" title="Page 130">
                130
            </a>
        </li>
        <li>
            <a class="fr-pagination__link fr-displayed-lg" href="#" title="Page 131">
                131
            </a>
        </li>
        <li>
            <a class="fr-pagination__link" href="#" title="Page 132">
                132
            </a>
        </li>
        <li>
            <a class="fr-pagination__link fr-pagination__link--next fr-pagination__link--lg-label" href="#">
                Page suivante
            </a>
        </li>
        <li>
            <a class="fr-pagination__link fr-pagination__link--last" href="#">
                Dernière page
            </a>
        </li>
    </ul>
</nav>

pagination deuxième page

<nav role="navigation" class="fr-pagination" aria-label="Pagination">
    <ul class="fr-pagination__list">
        <li>
            <a class="fr-pagination__link fr-pagination__link--first" href="#">
                Première page
            </a>
        </li>
        <li>
            <a class="fr-pagination__link fr-pagination__link--prev fr-pagination__link--lg-label" href="#">
                Page précédente
            </a>
        </li>
        <li>
            <a class="fr-pagination__link" href="#" title="Page 1">
                1
            </a>
        </li>
        <li>
            <a class="fr-pagination__link" aria-current="page" title="Page 2">
                2
            </a>
        </li>
        <li>
            <a class="fr-pagination__link fr-displayed-lg" href="#" title="Page 3">
                3
            </a>
        </li>
        <li>
            <a class="fr-pagination__link fr-displayed-lg">
                …
            </a>
        </li>
        <li>
            <a class="fr-pagination__link fr-displayed-lg" href="#" title="Page 130">
                130
            </a>
        </li>
        <li>
            <a class="fr-pagination__link fr-displayed-lg" href="#" title="Page 131">
                131
            </a>
        </li>
        <li>
            <a class="fr-pagination__link" href="#" title="Page 132">
                132
            </a>
        </li>
        <li>
            <a class="fr-pagination__link fr-pagination__link--next fr-pagination__link--lg-label" href="#">
                Page suivante
            </a>
        </li>
        <li>
            <a class="fr-pagination__link fr-pagination__link--last" href="#">
                Dernière page
            </a>
        </li>
    </ul>
</nav>

pagination dernière page

<nav role="navigation" class="fr-pagination" aria-label="Pagination">
    <ul class="fr-pagination__list">
        <li>
            <a class="fr-pagination__link fr-pagination__link--first" href="#">
                Première page
            </a>
        </li>
        <li>
            <a class="fr-pagination__link fr-pagination__link--prev fr-pagination__link--lg-label" href="#">
                Page précédente
            </a>
        </li>
        <li>
            <a class="fr-pagination__link" href="#" title="Page 1">
                1
            </a>
        </li>
        <li>
            <a class="fr-pagination__link" href="#" title="Page 2">
                2
            </a>
        </li>
        <li>
            <a class="fr-pagination__link fr-displayed-lg" href="#" title="Page 3">
                3
            </a>
        </li>
        <li>
            <a class="fr-pagination__link fr-displayed-lg">
                …
            </a>
        </li>
        <li>
            <a class="fr-pagination__link fr-displayed-lg" href="#" title="Page 130">
                130
            </a>
        </li>
        <li>
            <a class="fr-pagination__link fr-displayed-lg" href="#" title="Page 131">
                131
            </a>
        </li>
        <li>
            <a class="fr-pagination__link" aria-current="page" title="Page 132">
                132
            </a>
        </li>
        <li>
            <a class="fr-pagination__link fr-pagination__link--next fr-pagination__link--lg-label">
                Page suivante
            </a>
        </li>
        <li>
            <a class="fr-pagination__link fr-pagination__link--last">
                Dernière page
            </a>
        </li>
    </ul>
</nav>