DSFR v1.12.0

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 libellés

<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 libellés à 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" data-fr-analytics-page-total="132">
    <ul class="fr-pagination__list">
        <li>
            <a class="fr-pagination__link fr-pagination__link--first" id="pagination-6924" title="Première page" aria-disabled="true" role="link">
                Première page
            </a>
        </li>
        <li>
            <a class="fr-pagination__link fr-pagination__link--prev fr-pagination__link--lg-label" id="pagination-6925" title="Page précédente" aria-disabled="true" role="link">
                Page précédente
            </a>
        </li>
        <li>
            <a class="fr-pagination__link" id="pagination-6917" aria-current="page" title="Page 1">
                1
            </a>
        </li>
        <li>
            <a class="fr-pagination__link" id="pagination-6918" href="#" title="Page 2">
                2
            </a>
        </li>
        <li>
            <a class="fr-pagination__link fr-hidden fr-unhidden-lg" id="pagination-6919" href="#" title="Page 3">
                3
            </a>
        </li>
        <li>
            <a class="fr-pagination__link fr-hidden fr-unhidden-lg" id="pagination-6920" href="#">
                …
            </a>
        </li>
        <li>
            <a class="fr-pagination__link fr-hidden fr-unhidden-lg" id="pagination-6921" href="#" title="Page 130">
                130
            </a>
        </li>
        <li>
            <a class="fr-pagination__link fr-hidden fr-unhidden-lg" id="pagination-6922" href="#" title="Page 131">
                131
            </a>
        </li>
        <li>
            <a class="fr-pagination__link" id="pagination-6923" href="#" title="Page 132">
                132
            </a>
        </li>
        <li>
            <a class="fr-pagination__link fr-pagination__link--next fr-pagination__link--lg-label" id="pagination-6926" href="#" title="Page suivante">
                Page suivante
            </a>
        </li>
        <li>
            <a class="fr-pagination__link fr-pagination__link--last" id="pagination-6927" href="#" title="Dernière page">
                Dernière page
            </a>
        </li>
    </ul>
</nav>

Pagination deuxième page

<nav role="navigation" class="fr-pagination" aria-label="Pagination" data-fr-analytics-page-total="132">
    <ul class="fr-pagination__list">
        <li>
            <a class="fr-pagination__link fr-pagination__link--first" id="pagination-6947" href="#" title="Première page">
                Première page
            </a>
        </li>
        <li>
            <a class="fr-pagination__link fr-pagination__link--prev fr-pagination__link--lg-label" id="pagination-6948" href="#" title="Page précédente">
                Page précédente
            </a>
        </li>
        <li>
            <a class="fr-pagination__link" id="pagination-6940" href="#" title="Page 1">
                1
            </a>
        </li>
        <li>
            <a class="fr-pagination__link" id="pagination-6941" aria-current="page" title="Page 2">
                2
            </a>
        </li>
        <li>
            <a class="fr-pagination__link fr-hidden fr-unhidden-lg" id="pagination-6942" href="#" title="Page 3">
                3
            </a>
        </li>
        <li>
            <a class="fr-pagination__link fr-hidden fr-unhidden-lg" id="pagination-6943" href="#">
                …
            </a>
        </li>
        <li>
            <a class="fr-pagination__link fr-hidden fr-unhidden-lg" id="pagination-6944" href="#" title="Page 130">
                130
            </a>
        </li>
        <li>
            <a class="fr-pagination__link fr-hidden fr-unhidden-lg" id="pagination-6945" href="#" title="Page 131">
                131
            </a>
        </li>
        <li>
            <a class="fr-pagination__link" id="pagination-6946" href="#" title="Page 132">
                132
            </a>
        </li>
        <li>
            <a class="fr-pagination__link fr-pagination__link--next fr-pagination__link--lg-label" id="pagination-6949" href="#" title="Page suivante">
                Page suivante
            </a>
        </li>
        <li>
            <a class="fr-pagination__link fr-pagination__link--last" id="pagination-6950" href="#" title="Dernière page">
                Dernière page
            </a>
        </li>
    </ul>
</nav>

Pagination dernière page

<nav role="navigation" class="fr-pagination" aria-label="Pagination" data-fr-analytics-page-total="132">
    <ul class="fr-pagination__list">
        <li>
            <a class="fr-pagination__link fr-pagination__link--first" id="pagination-6970" href="#" title="Première page">
                Première page
            </a>
        </li>
        <li>
            <a class="fr-pagination__link fr-pagination__link--prev fr-pagination__link--lg-label" id="pagination-6971" href="#" title="Page précédente">
                Page précédente
            </a>
        </li>
        <li>
            <a class="fr-pagination__link" id="pagination-6963" href="#" title="Page 1">
                1
            </a>
        </li>
        <li>
            <a class="fr-pagination__link" id="pagination-6964" href="#" title="Page 2">
                2
            </a>
        </li>
        <li>
            <a class="fr-pagination__link fr-hidden fr-unhidden-lg" id="pagination-6965" href="#" title="Page 3">
                3
            </a>
        </li>
        <li>
            <a class="fr-pagination__link fr-hidden fr-unhidden-lg" id="pagination-6966" href="#">
                …
            </a>
        </li>
        <li>
            <a class="fr-pagination__link fr-hidden fr-unhidden-lg" id="pagination-6967" href="#" title="Page 130">
                130
            </a>
        </li>
        <li>
            <a class="fr-pagination__link fr-hidden fr-unhidden-lg" id="pagination-6968" href="#" title="Page 131">
                131
            </a>
        </li>
        <li>
            <a class="fr-pagination__link" id="pagination-6969" aria-current="page" title="Page 132">
                132
            </a>
        </li>
        <li>
            <a class="fr-pagination__link fr-pagination__link--next fr-pagination__link--lg-label" id="pagination-6972" title="Page suivante" aria-disabled="true" role="link">
                Page suivante
            </a>
        </li>
        <li>
            <a class="fr-pagination__link fr-pagination__link--last" id="pagination-6973" title="Dernière page" aria-disabled="true" role="link">
                Dernière page
            </a>
        </li>
    </ul>
</nav>

Paramètres d’affichage

Choisissez un thème pour personnaliser l’apparence du site.