<% @page_title = "Pagination" %>

<%= @page_title %>

Moving between pages has become less common with the advent of longer pages and AJAX loading, but it can still be useful for long, repetitive listings or content.

Build With Predefined HTML Classes

There are two ways to build pagination in Foundation 4: with our predefined HTML or with our mixin. Building pagination using our predefined classes isn't hard at all. You'll start with an unordered list and add a class of .pagination to it. From there, you just need to add list items with links in them. Those list items have a few options you can use:

To create the arrows, make sure you have <li class="arrow"> as your first and last list items.
To mark the current page, use <li class="current">
Add a class of .unavailable to a list item to make it not clickable, like for the ellipsis in the middle.
The page numbers and symbols are always inside of an anchor that you'll link to the page.

<%= code_example '

', :html %>

For these styles to come across, make sure you have the default Foundation CSS package or that you've selected pagination from a custom package. These should be linked up following our default HTML page structure.

Centered Pagination

In some instances, you'll want you pagination to be centered within a container. We've got you covered! Just wrap your unordered list in something that has a defined width and add the class, .pagination-centered.

<%= code_example '

', :html %>

Build with a Mixin

We've included SCSS mixins used to style pagination. To use the mixin, you'll need to have the extension installed or grab _variables.scss, _global.scss and _pagination.scss from Github and throw them into a Foundation folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:

<%= code_example ' @import "foundation/variables", "foundation/components/global", "foundation/components/pagination"; ', :css %>

If you are using the mixins, you may include the styles on whatever class or ID you'd like to the unordered list. The interior classes come with the mixin, just make sure you follow our markup structure:

<%= code_example '

', :html %>

Quick Mixin

You can build your pagination using our global mixin by including it on your own custom class. The mixin contains all the necessary styles for positioning and styling the unordered full list of items, the code looks like this:

<%= code_example ' .your-class-name { @include pagination; }', :css %>

Centering

Just like with the CSS, we've made it easy to center the pagination element using the quick mixin.

<%= code_example ' .your-class-name { @include pagination($centered, $base-styles); } /* Setting this to true will add styles to the parent of your pagination element for centering */ $centered: false /* This controls whether or not the base styles come across. Useful when applying the centered option. */ $base-style: true ', :css %>

Default SCSS Variables

<%= code_example ' /* We use these to control the pagination container */ $pagination-height: emCalc(24px); $pagination-margin: emCalc(-5px); /* We use these to set the list-item properties */ $pagination-li-float: $default-float; $pagination-li-height: emCalc(24px); $pagination-li-font-color: #222; $pagination-li-font-size: emCalc(14px); $pagination-li-margin: emCalc(5px); /* We use these for the pagination anchor links */ $pagination-link-pad: emCalc(1px) emCalc(7px) emCalc(1px); $pagination-link-font-color: #999; $pagination-link-active-bg: darken(#fff, 10%); /* We use these for disabled anchor links */ $pagination-link-unavailable-cursor: $cursor-default-value; $pagination-link-unavailable-font-color: #999; $pagination-link-unavailable-bg-active: transparent; /* We use these for currently selected anchor links */ $pagination-link-current-background: $primary-color; $pagination-link-current-font-color: #fff; $pagination-link-current-font-weight: bold; $pagination-link-current-cursor: $cursor-default-value; $pagination-link-current-active-bg: $primary-color;', :css %>

Note: emCalc(); is a function we wrote to convert px to em. It is included in _variables.scss.

<%= render "_sidebar-components.html.erb" %>