Pagination

Use the Tailwind CSS pagination element to indicate a series of content across various pages based on multiple styles and sizes

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:Next href="#" />
        </twig:Pagination:Item>
    </twig:Pagination:Content>
</twig:Pagination>

Installation

bin/console ux:install pagination --kit flowbite-4

That's it!

Install the following Composer dependencies:

composer require symfony/ux-icons tales-from-a-dev/twig-tailwind-extra:^1.0.0

Copy the following file(s) into your Symfony app:

templates/components/Pagination.html.twig 
{# @block content The pagination structure, typically a `Pagination:Content` #}
<nav
    class="{{ ('flex items-center space-x-4 ' ~ attributes.render('class'))|tailwind_merge }}"
    role="navigation"
    {{ attributes }}
>
    {%- block content %}{% endblock -%}
</nav>
templates/components/Pagination/Content.html.twig 
{# @block content The pagination items, typically multiple `Pagination:Item` components #}
<ul
    class="{{ ('flex -space-x-px text-sm rounded-base [&_a]:h-10 [&_*]:rounded-none [&>*:first-child]:[&_*]:rounded-s-base [&>*:last-child]:[&_*]:rounded-e-base ' ~ attributes.render('class'))|tailwind_merge }}"
    {{ attributes }}
>
    {%- block content %}{% endblock -%}
</ul>
templates/components/Pagination/Item.html.twig 
{# @block content The pagination item content, typically a `Pagination:Link` #}
<li{{ attributes }}>
    {%- block content %}{% endblock -%}
</li>
templates/components/Pagination/Link.html.twig 
{# @prop active boolean Whether this is the current page. Defaults to `false` #}
{# @block content The page number or navigation icon #}
{%- props active = false -%}
<twig:Button
    as="a"
    variant="secondary"
    shape="rounded"
    size="icon"
    aria-current="{{ active ? 'page' : false }}"
    href="#"
    class="{{ active ? 'text-fg-brand bg-neutral-tertiary-medium' : '' }}"
    {{ ...attributes.without('class') }}
>
    {{- block(outerBlocks.content) -}}
</twig:Button>
templates/components/Pagination/Next.html.twig 
{% props asIcon = false %}

<twig:Pagination:Link
    aria-label="Go to next page"
    size="{{ asIcon ? 'icon' : 'default' }}"
    {{ ...attributes }}
>
    {% if asIcon %}
        <twig:ux:icon name="flowbite:chevron-right-outline" class="size-4" />
    {% else %}
        <span>Next</span>
    {% endif %}
</twig:Pagination:Link>
templates/components/Pagination/Previous.html.twig 
{% props asIcon = false %}

<twig:Pagination:Link
    aria-label="Go to previous page"
    size="{{ asIcon ? 'icon' : 'default' }}"
    {{ ...attributes }}
>
    {% if asIcon %}
        <twig:ux:icon name="flowbite:chevron-left-outline" class="size-4" />
    {% else %}
        <span>Previous</span>
    {% endif %}
</twig:Pagination:Link>

Happy coding!

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:Next href="#" />
        </twig:Pagination:Item>
    </twig:Pagination:Content>
</twig:Pagination>

Examples

As icon

The following pagination component example shows how you can use SVG icons instead of text to show the previous and next pages.

Loading... 
<twig:Pagination>
    <twig:Pagination:Content>
        <twig:Pagination:Item>
            <twig:Pagination:Previous asIcon 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:Next asIcon href="#" />
        </twig:Pagination:Item>
    </twig:Pagination:Content>
</twig:Pagination>

API Reference

Pagination

Block Description
content The pagination structure, typically a Pagination:Content

Pagination:Content

Block Description
content The pagination items, typically multiple Pagination:Item components

Pagination:Item

Block Description
content The pagination item content, typically a Pagination:Link

Pagination:Link

Prop Type Description
active boolean Whether this is the current page. Defaults to false
Block Description
content The page number or navigation icon