Pagination

A navigation component that displays page numbers and controls for moving between pages.

Loading... 
<twig:Pagination>
    <twig:Pagination:Content>
        <twig:Pagination:Item>
            <twig:Pagination:Previous href="#" />
        </twig:Pagination:Item>
        <twig:Pagination:Item>
            <twig:Pagination:Link href="#">1</twig:Pagination:Link>
        </twig:Pagination:Item>
        <twig:Pagination:Item>
            <twig:Pagination:Link href="#" active>2</twig:Pagination:Link>
        </twig:Pagination:Item>
        <twig:Pagination:Item>
            <twig:Pagination:Link href="#">3</twig:Pagination:Link>
        </twig:Pagination:Item>
        <twig:Pagination:Item>
            <twig:Pagination:Ellipsis />
        </twig:Pagination:Item>
        <twig:Pagination:Item>
            <twig:Pagination:Next href="#" />
        </twig:Pagination:Item>
    </twig:Pagination:Content>
</twig:Pagination>

Installation

Ensure the Symfony UX Toolkit is installed in your Symfony app:

$ composer require --dev symfony/ux-toolkit

Then, run the following command to install the component and its dependencies:

$ bin/console ux:install pagination --kit shadcn

The UX Toolkit is not mandatory to install a component. You can install it manually by following the next steps:

  1. Copy the following file(s) into your Symfony app:
    templates/components/Pagination.html.twig 
    {# @block content The default block #}
<nav
    class="{{ 'mx-auto flex w-full justify-center ' ~ attributes.render('class')|tailwind_merge }}"
    role="navigation"
    {{ attributes }}
>
    {%- block content %}{% endblock -%}
</nav>
    templates/components/Pagination/Content.html.twig 
    {# @block content The default block #}
<ul {{ attributes.without('class') }}
    class="{{ 'flex flex-row items-center gap-1 ' ~ attributes.render('class')|tailwind_merge }}"
>
    {%- block content %}{% endblock -%}
</ul>
    templates/components/Pagination/Ellipsis.html.twig 
    <span
    aria-hidden="true"
    class="{{ 'flex size-9 items-center justify-center ' ~ attributes.render('class')|tailwind_merge }}"
    {{ attributes.without('class') }}
>
    <twig:ux:icon name="lucide:more-horizontal" class="size-4" />
    <span class="sr-only">More pages</span>
</span>
    templates/components/Pagination/Item.html.twig 
    {# @block content The default block #}
<li{{ attributes }}>
    {%- block content %}{% endblock -%}
</li>
    templates/components/Pagination/Link.html.twig 
    {# @prop active boolean Whether the link is active or not, default to `false` #}
{# @block content The default block #}
{%- props active = false -%}
<twig:Button
    as="a"
    variant="{{ active ? 'outline' : 'ghost' }}"
    size="icon"
    aria-current="{{ active ? 'page' : false }}"
    href="#"
    {{ ...attributes.without('class') }}
>
    {{- block(outerBlocks.content) -}}
</twig:Button>
    templates/components/Pagination/Next.html.twig 
    <twig:Pagination:Link
    aria-label="Go to next page"
    size="default"
    class="{{ 'gap-1 pr-2.5 ' ~ attributes.render('class')|tailwind_merge }}"
    {{ ...attributes.without('class') }}
>
    <span>Next</span>
    <twig:ux:icon name="lucide:chevron-right" class="size-4" />
</twig:Pagination:Link>
    templates/components/Pagination/Previous.html.twig 
    <twig:Pagination:Link
    aria-label="Go to previous page"
    size="default"
    class="{{ 'gap-1 pl-2.5 ' ~ attributes.render('class')|tailwind_merge }}"
    {{ ...attributes.without('class') }}
>
    <twig:ux:icon name="lucide:chevron-left" class="size-4" />
    <span>Previous</span>
</twig:Pagination:Link>
  2. If necessary, install the following Composer dependencies: 
    $ composer require symfony/ux-icons tales-from-a-dev/twig-tailwind-extra:^1.0.0
  3. And the most important, enjoy!

Usage

<twig:Pagination>
    <twig:Pagination:Content>
        <twig:Pagination:Item>
            <twig:Pagination:Previous href="#" />
        </twig:Pagination:Item>
        <twig:Pagination:Item>
            <twig:Pagination:Link href="#">1</twig:Pagination:Link>
        </twig:Pagination:Item>
        <twig:Pagination:Item>
            <twig:Pagination:Link href="#" active>2</twig:Pagination:Link>
        </twig:Pagination:Item>
        <twig:Pagination:Item>
            <twig:Pagination:Link href="#">3</twig:Pagination:Link>
        </twig:Pagination:Item>
        <twig:Pagination:Item>
            <twig:Pagination:Ellipsis />
        </twig:Pagination:Item>
        <twig:Pagination:Item>
            <twig:Pagination:Next href="#" />
        </twig:Pagination:Item>
    </twig:Pagination:Content>
</twig:Pagination>

Examples

Default

Loading... 
<twig:Pagination>
    <twig:Pagination:Content>
        <twig:Pagination:Item>
            <twig:Pagination:Previous href="#" />
        </twig:Pagination:Item>
        <twig:Pagination:Item>
            <twig:Pagination:Link href="#">1</twig:Pagination:Link>
        </twig:Pagination:Item>
        <twig:Pagination:Item>
            <twig:Pagination:Link href="#" active>2</twig:Pagination:Link>
        </twig:Pagination:Item>
        <twig:Pagination:Item>
            <twig:Pagination:Link href="#">3</twig:Pagination:Link>
        </twig:Pagination:Item>
        <twig:Pagination:Item>
            <twig:Pagination:Ellipsis />
        </twig:Pagination:Item>
        <twig:Pagination:Item>
            <twig:Pagination:Next href="#" />
        </twig:Pagination:Item>
    </twig:Pagination:Content>
</twig:Pagination>

Symmetric

Loading... 
<twig:Pagination>
    <twig:Pagination:Content>
        <twig:Pagination:Item>
            <twig:Pagination:Previous href="#" />
        </twig:Pagination:Item>
        <twig:Pagination:Item>
            <twig:Pagination:Link href="#">1</twig:Pagination:Link>
        </twig:Pagination:Item>
        <twig:Pagination:Item>
            <twig:Pagination:Ellipsis />
        </twig:Pagination:Item>
        <twig:Pagination:Item>
            <twig:Pagination:Link href="#">4</twig:Pagination:Link>
        </twig:Pagination:Item>
        <twig:Pagination:Item>
            <twig:Pagination:Link href="#" active>5</twig:Pagination:Link>
        </twig:Pagination:Item>
        <twig:Pagination:Item>
            <twig:Pagination:Link href="#">6</twig:Pagination:Link>
        </twig:Pagination:Item>
        <twig:Pagination:Item>
            <twig:Pagination:Ellipsis />
        </twig:Pagination:Item>
        <twig:Pagination:Item>
            <twig:Pagination:Link href="#">9</twig:Pagination:Link>
        </twig:Pagination:Item>
        <twig:Pagination:Item>
            <twig:Pagination:Next href="#" />
        </twig:Pagination:Item>
    </twig:Pagination:Content>
</twig:Pagination>

API Reference

Pagination

Block Description
content The default block

Pagination:Content

Block Description
content The default block

Pagination:Item

Block Description
content The default block

Pagination:Link

Prop Type Description
active boolean Whether the link is active or not, default to false
Block Description
content The default block