---
title: Pagination
layout: doc/layouts/default.html
---
# Pagination
***
{{> examples_pagination_basic}}
***
## Basic
Add a `.pagination` class to a `ul` to get started, then add list items with links in them.
* Create arrows by adding an `.arrow` class to the first and last list items.
* To mark the current page, add a `.current` class to a list item.
* Add a class of `.unavailable` to a list item to make it not clickable, like for the ellipsis in the middle.
HTML
{{#markdown}}
```html
{{> examples_pagination_basic}}
```
{{/markdown}}
Rendered HTML
{{> examples_pagination_basic}}
***
## Advanced
Wrap your ul.pagination with an element that has the .pagination-centered class to center your pagination.
HTML
{{#markdown}}
```html
{{> examples_pagination_centered}}
```
{{/markdown}}
Rendered HTML
***
## Customize With Sass
Pagination styles can be easily customized with the Sass variables provided in the `_settings.scss` file.
SCSS
{{> examples_pagination_variables}}
***
## Semantic Markup With Sass
You can apply pagination styles to semantic markup using Sass mixins.
Basic
You can use the `pagination()` mixin to create your own pagination element, like so:
SCSS
{{#markdown}}
```scss
.your-class-name {
@include pagination;
}
```
{{/markdown}}
HTML
{{#markdown}}
```html
{{> examples_pagination_mixin}}
```
{{/markdown}}
Advanced
You can center your pagination by wrapping your pagination element in another container that is styled with the `pagination-container()` mixin. To center your pagination within the container element, set the `$centered` option in your mixin to `true`.
SCSS
{{#markdown}}
```scss
.container-class-name { @include pagination-container(true); }
.your-class-name { @include pagination($centered, $base-styles); }
```
{{/markdown}}
HTML
{{#markdown}}
```html
{{> examples_pagination_centered_mixin}}
```
{{/markdown}}
***
### Sass Errors?
If the default "foundation" import was commented out, then make sure you import this file:
SCSS
```scss
@import "foundation/components/pagination";
```