> For the complete documentation index, see [llms.txt](https://docs-drift.g-axon.work/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs-drift.g-axon.work/components/pagination.md).

# Pagination

### Default

{% tabs %}
{% tab title="Simple" %}
![](/files/-LuqgJOQ1l66PfJxR8_a)

```markup
<!-- Pagination -->
<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="javascript:void(0)">Previous</a></li>
    <li class="page-item"><a class="page-link" href="javascript:void(0)">1</a></li>
    <li class="page-item"><a class="page-link" href="javascript:void(0)">2</a></li>
    <li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li>
    <li class="page-item"><a class="page-link" href="javascript:void(0)">Next</a></li>
  </ul>
</nav>
<!-- /pagination -->
```

{% endtab %}

{% tab title="Icon" %}
![](/files/-LuqgTnHmsSj7oyt4daz)

```markup
<!-- Pagination -->
<nav aria-label="Page navigation example">
    <ul class="pagination">
        <li class="page-item">
            <a class="page-link" href="javascript:void(0)" aria-label="Previous">
                <span aria-hidden="true"><i class="icon icon-chevrolet-left"></i></span>
                <span class="sr-only">Previous</span>
            </a>
        </li>
        <li class="page-item"><a class="page-link" href="javascript:void(0)">1</a></li>
        <li class="page-item"><a class="page-link" href="javascript:void(0)">2</a></li>
        <li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li>
        <li class="page-item">
            <a class="page-link" href="javascript:void(0)" aria-label="Next">
                <span aria-hidden="true"><i class="icon icon-chevrolet-right"></i></span>
                <span class="sr-only">Next</span>
            </a>
        </li>
    </ul>
</nav>
<!-- /pagination --
```

{% endtab %}

{% tab title="Disabled & Active" %}

<div align="center"><img src="/files/-Luqj-Xriy-mPV4U6DnS" alt=""></div>

```markup
<!-- Pagination -->
<nav>
    <ul class="pagination">
        <li class="page-item disabled">
            <a class="page-link" href="javascript:void(0)" tabindex="-1">Previous</a>
        </li>
        <li class="page-item">
            <a class="page-link" href="javascript:void(0)">1</a>
        </li>
        <li class="page-item active">
            <a class="page-link" href="javascript:void(0)">2 <span class="sr-only">(current)</span></a>
        </li>
        <li class="page-item">
            <a class="page-link" href="javascript:void(0)">3</a>
        </li>
        <li class="page-item">
            <a class="page-link" href="javascript:void(0)">Next</a>
        </li>
    </ul>
</nav>
<!-- /pagination -->
```

{% endtab %}
{% endtabs %}

### Sizing

{% tabs %}
{% tab title="Large" %}
![](/files/-LuqjYLmE5lk-h2RumNQ)

```markup
<!-- Pagination -->
<nav>
    <ul class="pagination pagination-lg">
        <li class="page-item disabled">
            <a class="page-link" href="javascript:void(0)" tabindex="-1">1</a>
        </li>
        <li class="page-item">
            <a class="page-link" href="javascript:void(0)">2</a>
        </li>
        <li class="page-item">
            <a class="page-link" href="javascript:void(0)">3</a>
        </li>
    </ul>
</nav>
<!-- /pagination -->
```

{% endtab %}

{% tab title="Small" %}
![](/files/-Luqk0gxovm9fnbu2j3E)

```markup
<!-- Pagination -->
<nav>
    <ul class="pagination pagination-sm">
        <li class="page-item disabled">
            <a class="page-link" href="javascript:void(0)" tabindex="-1">1</a>
        </li>
        <li class="page-item">
            <a class="page-link" href="javascript:void(0)">2</a>
        </li>
        <li class="page-item">
            <a class="page-link" href="javascript:void(0)">3</a>
        </li>
    </ul>
</nav>
<!-- /pagination -->
```

{% endtab %}
{% endtabs %}

### Alignment

{% tabs %}
{% tab title="Start" %}
![](/files/-LuqlEy2mDqbYikX4mFe)

```markup
<!-- Pagination -->
<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="javascript:void(0)">Previous</a></li>
    <li class="page-item"><a class="page-link" href="javascript:void(0)">1</a></li>
    <li class="page-item"><a class="page-link" href="javascript:void(0)">2</a></li>
    <li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li>
    <li class="page-item"><a class="page-link" href="javascript:void(0)">Next</a></li>
  </ul>
</nav>
<!-- /pagination -->
```

{% endtab %}

{% tab title="Center" %}
![](/files/-Luql_mUSGvj9XXPpZgy)

```markup
<!-- Pagination -->
<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-center">
    <li class="page-item disabled"><a class="page-link" href="javascript:void(0)">Previous</a></li>
    <li class="page-item"><a class="page-link" href="javascript:void(0)">1</a></li>
    <li class="page-item"><a class="page-link" href="javascript:void(0)">2</a></li>
    <li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li>
    <li class="page-item"><a class="page-link" href="javascript:void(0)">Next</a></li>
  </ul>
</nav>
<!-- /pagination -->
```

{% endtab %}

{% tab title="End" %}
![](/files/-LuqmT9ehRqnBBG2maby)

```markup
<!-- Pagination -->
<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-end">
    <li class="page-item disabled"><a class="page-link" href="javascript:void(0)">Previous</a></li>
    <li class="page-item"><a class="page-link" href="javascript:void(0)">1</a></li>
    <li class="page-item"><a class="page-link" href="javascript:void(0)">2</a></li>
    <li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li>
    <li class="page-item"><a class="page-link" href="javascript:void(0)">Next</a></li>
  </ul>
</nav>
<!-- /pagination -->
```

{% endtab %}
{% endtabs %}
