Pagination

There are some classes that can help you build pagination indicators. Although you're responsible for the scripts that would control these, it's nice to have some good looking navigation.

Pagination Classes

pagination

Sizing

• pagination-{SIZ}
  • SIZ: sm lg

Items and Links

• page-{TYP}
  • item link

Try it

The whole pagination should be placed in a nav container with a proper aria tag. Inside that you can place a list.

In addition there are two size modifiers, pagination-sm and pagination-lg

Although I like to keep things simple, this is one place where I think doing a list of items instead of trying to just do anchor tags help. That's because in JavaScript you'd be turning some of these classes on and off. If you were to try to do just anchor tags, you'd have to physically change things from anchor to spans, so the class approach works better.

The ul or ol tags will carry the pagination class.

Then the li tag will have the page-item class. If an item needs to be disabled, you can add the disabled class here.

The links will carry the page-link class.

If one of these items are disabled, make sure that you add the tabindex="-1" property and aria-disabled="true" for assistive devices.

If one of these links have the active class, make sure you add the aria-current="page" property to identify the active class.

Without using sass, it's a bit difficult to color these elements, you can try using some of the contextual background and text classes, but other than that, there's a lot of states to have to worry about that you might have to customize with CSS.