(00) 1234 56780009Login
Pagination
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.
To create the arrows, make sure you have class="arrow" as your first and last list items.
To mark the current page, use class="current"
Add a class of .inactive 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.
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.
Side Navigation
Side nav, like you'll see here on the left, is useful for sections of either a site or a page.
Sub Nav
This simple sub nav is great for moving between different states of a page. We use these frequently to show iterations of something, typically by date, but they're also handy for filters like these.
Breadcrumbs
Breadcrumbs come in handy to show a navigation trail for users clicking through a site or app. They'll conform to 100% of the container width you put them in.