Pagination is one of those little design necessities that often gets overlooked. But for blogs and other content-heavy sites, it provides an important means of navigating between pages. A well-crafted paginated website can encourage users to explore further what you have to offer.
Some designers dare to take pagination to the next level. Here’s a look at some very creative CSS and JavaScript code snippets that you can use for free to improve the pagination on your own website.
You might also like these menu and navigation snippet collections:
CSS & JavaScript Snippets for Creating a Responsive Navigation →
CSS & JavaScript Snippets for Creating Icon-Based Navigations →
CSS & JavaScript Snippets for Creating Slide-Out Sidebars →
Web Templates
2,000+ Templates
Newsletter Templates
270+ Templates
Dashboard Templates
150+ Templates
WordPress Themes
1,200+ Themes
WordPress Plugins
550+ Plugins
Mockup Templates
8,200+ Templates
Start Downloading Now!
Simple & Intuitive Pagination with Hover Effects
Our first example shows how some basic hover effects can vastly improve standard pagination. The ua-smooth underline that follows your cursor makes for a much more intuitive experience. Plus, the entire menu is very easy to read. This is a simple way to help users.
See the Pen Line Pagination with Hover (PureCSS) by Mark Mead
Live Count Pagination
One of the most frustrating parts of pagination can be how menus handle a large number of pages. This snippet uses jQuery to show adjacent page numbers as you click. It’s a much easier path to follow.
See the Pen jQuery Pagination Example (twbs-pagination) by Simon Codrington
The Kitchen Sink Pagination
This is an exciting concept. Designed to be both responsive and more accessible, this pagination UI contains multiple ways to navigate – including via a keyboard. The timeline-like bar at the top clearly labels the current page and offers a great overview of everything available.
See the Pen Pagination by Simon Goellner
Let the Yeti Guide You
They say good help is hard to find. But this snippet provides the help of a Yeti (at least, the hand of a Yeti) when clicking through the page numbers. While Yetis may not fit with your motif, this is an example of how we can add an element of fun (and surprise).
See the Pen Yeti Hand Pagination by Darin
Pagination Enhanced for Mobile Screens
On smaller screens, pagination can be terribly difficult to use. Navigation items are often too small and too hard to read. This snippet provides a great alternative for mobile devices. Each item is larger as the navigation stretches vertically. The result is that mobile users can get around without having to squint their eyes or zoom in.
See the Pen Responsive Pagination by Scott Carver
Pagination with No Numbers
Sometimes, we don’t need to number each item within the pagination. This example is attractively minimal with the use of dots rather than numerals. It’s a good solution for slideshows or navigating multiple panels of content.
See the Pen Infinite Pagination by Mariusz Dabrowski
Touch Friendly Pagination
Mobile UI works best when it reacts to a user’s touch. Here we have pagination that allows the user to swipe to get to the next or previous item. This little convenience can make all the difference when it comes to usability.
See the Pen Swiper custom pagination by Pavel Zakharoff
Combining Pagination with Infinite Scrolling
Designers often use infinite scrolling to replace pagination. But this is a neat concept of how they can be combined. The frustration of infinite scroll is that it can be difficult to go back and find that one particular item. This snippet adds new page numbers to the navigation as you continue to scroll down, making returning to the previous page a little easier.
See the Pen Infinite Scroll + Pagination by Tim Severien
A great web design doesn’t ignore the various elements that make up a page. The pros above show that pagination has more to offer when you put some effort into enhancing it.
So, take some inspiration from these examples and create pagination menus that both look and function better.
The post 8 CSS & JavaScript Snippets for Creating Paginated Navigations appeared first on Speckyboy Design Magazine.
