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.
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 nav, like you’ll see here on the left, is useful for sections of either a site or a page.
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 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.