DSFR v1.15.3
La pagination permet à l’utilisateur de naviguer entre les différentes pages d’une liste d'éléments.
Documentation<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>
<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>
<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>
<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-6531" 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-6532" title="Page précédente" aria-disabled="true" role="link">
Page précédente
</a>
</li>
<li>
<a class="fr-pagination__link" id="pagination-6524" aria-current="page" title="Page 1">
1
</a>
</li>
<li>
<a class="fr-pagination__link" id="pagination-6525" href="#" title="Page 2">
2
</a>
</li>
<li>
<a class="fr-pagination__link fr-hidden fr-unhidden-lg" id="pagination-6526" href="#" title="Page 3">
3
</a>
</li>
<li>
<span class="fr-pagination__link fr-hidden fr-unhidden-lg" id="pagination-6527">
…
</span>
</li>
<li>
<a class="fr-pagination__link fr-hidden fr-unhidden-lg" id="pagination-6528" href="#" title="Page 130">
130
</a>
</li>
<li>
<a class="fr-pagination__link fr-hidden fr-unhidden-lg" id="pagination-6529" href="#" title="Page 131">
131
</a>
</li>
<li>
<a class="fr-pagination__link" id="pagination-6530" href="#" title="Page 132">
132
</a>
</li>
<li>
<a class="fr-pagination__link fr-pagination__link--next fr-pagination__link--lg-label" id="pagination-6533" href="#" title="Page suivante">
Page suivante
</a>
</li>
<li>
<a class="fr-pagination__link fr-pagination__link--last" id="pagination-6534" href="#" title="Dernière page">
Dernière page
</a>
</li>
</ul>
</nav>
<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-6554" 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-6555" href="#" title="Page précédente">
Page précédente
</a>
</li>
<li>
<a class="fr-pagination__link" id="pagination-6547" href="#" title="Page 1">
1
</a>
</li>
<li>
<a class="fr-pagination__link" id="pagination-6548" aria-current="page" title="Page 2">
2
</a>
</li>
<li>
<a class="fr-pagination__link fr-hidden fr-unhidden-lg" id="pagination-6549" href="#" title="Page 3">
3
</a>
</li>
<li>
<span class="fr-pagination__link fr-hidden fr-unhidden-lg" id="pagination-6550">
…
</span>
</li>
<li>
<a class="fr-pagination__link fr-hidden fr-unhidden-lg" id="pagination-6551" href="#" title="Page 130">
130
</a>
</li>
<li>
<a class="fr-pagination__link fr-hidden fr-unhidden-lg" id="pagination-6552" href="#" title="Page 131">
131
</a>
</li>
<li>
<a class="fr-pagination__link" id="pagination-6553" href="#" title="Page 132">
132
</a>
</li>
<li>
<a class="fr-pagination__link fr-pagination__link--next fr-pagination__link--lg-label" id="pagination-6556" href="#" title="Page suivante">
Page suivante
</a>
</li>
<li>
<a class="fr-pagination__link fr-pagination__link--last" id="pagination-6557" href="#" title="Dernière page">
Dernière page
</a>
</li>
</ul>
</nav>
<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-6577" 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-6578" href="#" title="Page précédente">
Page précédente
</a>
</li>
<li>
<a class="fr-pagination__link" id="pagination-6570" href="#" title="Page 1">
1
</a>
</li>
<li>
<a class="fr-pagination__link" id="pagination-6571" href="#" title="Page 2">
2
</a>
</li>
<li>
<a class="fr-pagination__link fr-hidden fr-unhidden-lg" id="pagination-6572" href="#" title="Page 3">
3
</a>
</li>
<li>
<span class="fr-pagination__link fr-hidden fr-unhidden-lg" id="pagination-6573">
…
</span>
</li>
<li>
<a class="fr-pagination__link fr-hidden fr-unhidden-lg" id="pagination-6574" href="#" title="Page 130">
130
</a>
</li>
<li>
<a class="fr-pagination__link fr-hidden fr-unhidden-lg" id="pagination-6575" href="#" title="Page 131">
131
</a>
</li>
<li>
<a class="fr-pagination__link" id="pagination-6576" 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-6579" title="Page suivante" aria-disabled="true" role="link">
Page suivante
</a>
</li>
<li>
<a class="fr-pagination__link fr-pagination__link--last" id="pagination-6580" title="Dernière page" aria-disabled="true" role="link">
Dernière page
</a>
</li>
</ul>
</nav>