---
title: Pagination
---
***
{{> examples_pagination_basic}}
***
## Basic
Add a `.pagination` class to a `ul` to get started, then add list items with links or buttons 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
***
Accessibility
Use this snippet to make Pagination more accessible. Adding the role attribute gives context to a screen reader. The ```aria-label``` attribute will allow a screen reader to call out what the component is to the user. Using the Tab button, a user can navigate until they've reached the link below. (Use Shift+Tab to navigate back one step.)
If you are using an ```unavailable``` link, give it an aria-disabled attribute as in this example:
HTML
{{#markdown}}
```html
{{> examples_pagination_accessible}}
```
{{/markdown}}
Rendered HTML
{{> examples_pagination_accessible_rendered}}
This component still needs keyboard accessibility through arrow keys. Stay tuned for updates in future releases.
**Note:** It is bad practice to leave links that do not go anywhere on your live site. Use something like foo.html to fill them as you build.
***
## 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";
```