# Pagination

Easlily create a nicely looking pagination to navigate through pages.

## Usage

The Pagination component consists of button-like styled links, that are aligned side by side.

Class | Description
--- | ---
`.uk-pagination` | Add this class to a `<ul>` element to define the Pagination component. Use `<a>` elements as pagination items within the list.
`.uk-active` | Add this class to a list item to apply an active state and use a `<span>` instead of an `<a>` element.
`.uk-disabled` | Add this class to a list item to apply a disabled state and use a `<span>` instead of an `<a>` element.

To apply an ellipsis without any styling, just use a `<span>` element instead of an `<a>` element.

### Example

- 1
- 2
- 3
- 4
- ...
- 20

### Markup

    <ul class="uk-pagination">
        <li><a href="">...</a></li>
        <li class="uk-active"><span>...</span></li>
        <li class="uk-disabled"><span>...</span></li>
        <li><span>...</span></li>
    </ul>

## Alignment modifiers

Add the `.uk-pagination-left` or `.uk-pagination-right` class to the pagination to align it left or right.

#### Example

- 1
- ...
- 8
- 9
- 10
- 11
- 12
- ...
- 20

- 1
- ...
- 8
- 9
- 10
- 11
- 12
- ...
- 20

### Markup

    <ul class="uk-pagination uk-pagination-left">
        <li>...</li>
    </ul>

    <ul class="uk-pagination uk-pagination-right">
        <li>...</li>
    </ul>

## Previous and next

Creating a simple previous and next pagination is very easy. Just add the `.uk-pagination-previous` or `.uk-pagination-next` class to a `<li>` element to align previous and next buttons left or right.

#### Example

- Previous
- Next

#### Markup

    <li class="uk-pagination-previous"><a href="">...</a></li>
    <li class="uk-pagination-next"><a href="">...</a></li>

## Pagination with icons

Enhance your pagination with icons from the Icon component by adding one of the `.uk-icon-*` classes to an `<i>` or `<span>` element within a pagination link.

### Example

- ...

### Markup

    <li><a href=""><i class="uk-icon-angle-double-left"></i></a></li>
    <li><a href=""><i class="uk-icon-angle-double-right"></i></a></li>

## JavaScript

You can apply the additional Dynamic Pagination component to automatically calculate the pages, for example to trigger an event to load new items dynamically in Ajax powered list views.