Pagination

<twig:Pagination ariaLabel="Article pages">
    <twig:Pagination:Item label="Previous" disabled />
    <twig:Pagination:Item href="?page=1" label="1" active />
    <twig:Pagination:Item href="?page=2" label="2" />
    <twig:Pagination:Item href="?page=3" label="3" />
    <twig:Pagination:Item href="?page=2" label="Next" />
</twig:Pagination>

php bin/console ux:install pagination --kit bootstrap

composer require twig/extra-bundle twig/html-extra:^3.12.0

npm install bootstrap@^5.3.0
# ...or with Symfony AssetMapper
php bin/console importmap:require bootstrap bootstrap/dist/css/bootstrap.min.css

{# @prop size 'sm'|'lg'|null The pagination control size. #}
{# @prop align 'start'|'center'|'end'|null The horizontal alignment of the pagination links. #}
{# @prop ariaLabel string The accessible name of the navigation landmark. #}
{# @block content The pagination items, typically `Pagination:Item` components. #}
{%- props
    size = null,
    align = null,
    ariaLabel = 'Pagination'
-%}

{%- set pagination_classes = html_classes('pagination', {
    ('pagination-' ~ size): size in ['sm', 'lg'],
    ('justify-content-' ~ align): align in ['start', 'center', 'end'],
}) -%}

<nav {{ attributes.defaults({'aria-label': ariaLabel}) }}>
    <ul class="{{ pagination_classes }}">
        {%- block content -%}{% endblock -%}
    </ul>
</nav>

{# @prop active boolean Whether the item represents the current page. #}
{# @prop disabled boolean Whether the item is unavailable for interaction. #}
{# @prop href string|null The destination of the page link. #}
{# @prop label string The fallback item label when no content block is provided. #}
{# @prop ariaLabel string|null The accessible label for the page link. #}
{# @block content The page link content. #}
{%- props
    active = false,
    disabled = false,
    href = null,
    label = '',
    ariaLabel = null
-%}

{%- set item_classes = html_classes('page-item', {
    active: active,
    disabled: disabled,
}) -%}
<li {{ attributes.defaults({class: item_classes}) }}>
    {%- if href is not null and not disabled -%}
        <a class="page-link" href="{{ href }}"{% if ariaLabel is not null %} aria-label="{{ ariaLabel }}"{% endif %}{% if active %} aria-current="page"{% endif %}>
            {%- block content -%}{{- label -}}{%- endblock -%}
        </a>
    {%- else -%}
        <span class="page-link"{% if ariaLabel is not null %} aria-label="{{ ariaLabel }}"{% endif %}{% if active %} aria-current="page"{% endif %}{% if disabled %} aria-disabled="true"{% endif %}>
            {{- block('content') -}}
        </span>
    {%- endif -%}
</li>

<twig:Pagination ariaLabel="Page navigation example">
    <twig:Pagination:Item href="#" label="Previous" />
    <twig:Pagination:Item href="#" label="1" />
    <twig:Pagination:Item href="#" label="2" />
    <twig:Pagination:Item href="#" label="3" />
    <twig:Pagination:Item href="#" label="Next" />
</twig:Pagination>

<twig:Pagination ariaLabel="Page navigation example">
    <twig:Pagination:Item href="#" ariaLabel="Previous"><span aria-hidden="true">&laquo;</span></twig:Pagination:Item>
    <twig:Pagination:Item href="#" label="1" />
    <twig:Pagination:Item href="#" label="2" />
    <twig:Pagination:Item href="#" label="3" />
    <twig:Pagination:Item href="#" ariaLabel="Next"><span aria-hidden="true">&raquo;</span></twig:Pagination:Item>
</twig:Pagination>

<div>
    <twig:Pagination ariaLabel="Article pages">
        <twig:Pagination:Item href="#" label="Previous" />
        <twig:Pagination:Item href="#" label="1" />
        <twig:Pagination:Item href="#" label="2" active />
        <twig:Pagination:Item href="#" label="3" />
        <twig:Pagination:Item href="#" label="Next" />
    </twig:Pagination>

    <twig:Pagination ariaLabel="Article pages with a non-interactive current page" class="mt-3">
        <twig:Pagination:Item href="#" label="1" />
        <twig:Pagination:Item label="2" active />
        <twig:Pagination:Item href="#" label="3" />
    </twig:Pagination>
</div>

<twig:Pagination ariaLabel="Article pages">
    <twig:Pagination:Item label="Previous" disabled />
    <twig:Pagination:Item href="#" label="1" />
    <twig:Pagination:Item href="#" label="2" active />
    <twig:Pagination:Item href="#" label="3" />
    <twig:Pagination:Item href="#" label="Next" />
</twig:Pagination>

<div class="d-flex flex-column gap-3">
    <twig:Pagination size="lg" ariaLabel="Large pagination example">
        <twig:Pagination:Item label="1" active />
        <twig:Pagination:Item href="#" label="2" />
        <twig:Pagination:Item href="#" label="3" />
    </twig:Pagination>

    <twig:Pagination size="sm" ariaLabel="Small pagination example">
        <twig:Pagination:Item label="1" active />
        <twig:Pagination:Item href="#" label="2" />
        <twig:Pagination:Item href="#" label="3" />
    </twig:Pagination>
</div>

<div class="d-flex flex-column gap-3">
    <twig:Pagination align="center" ariaLabel="Centered page navigation example">
        <twig:Pagination:Item label="Previous" disabled />
        <twig:Pagination:Item href="#" label="1" />
        <twig:Pagination:Item href="#" label="2" />
        <twig:Pagination:Item href="#" label="3" />
        <twig:Pagination:Item href="#" label="Next" />
    </twig:Pagination>

    <twig:Pagination align="end" ariaLabel="End-aligned page navigation example">
        <twig:Pagination:Item label="Previous" disabled />
        <twig:Pagination:Item href="#" label="1" />
        <twig:Pagination:Item href="#" label="2" />
        <twig:Pagination:Item href="#" label="3" />
        <twig:Pagination:Item href="#" label="Next" />
    </twig:Pagination>
</div>