Pagination Gallery: Examples And Good Practices


Structure and hierarchy reduce complexity and improve readability. The more organized your articles or web-sites are, the easier it is for users to follow your arguments and get the message you are trying to deliver. On the Web this can be done in a variety of ways.

In body copy headlines and enumerations are usually used to present the information as logically separated data chunks. An alternative solution is pagination, a mechanism which provides users with additional navigation options for browsing through single parts of the given article. Parts of the article are usually referred to by numbers, hints, arrows as well as “previous” and “next”-buttons.

Search engines almost always use pagination; newspapers tend to make use of it for navigation through the parts of rather large articles. And there are situations when pagination is also necessary for weblogs. Additional navigation can simplify the access to some site pages — e.g. make it easier for users to browse through the archives of the site.

In most cases pagination is better than traditional “previous – next” navigation as it offers visitors a more quick and convenient navigation through the site. It’s not a must, but a useful nice-to-have-feature.

Let’s take a look at the good practices of pagination design as well as some examples of when and how the pagination is usually implemented.

Good Practices Of Pagination Design
(7 Aspects according to Faruk Ates)

  1. Provide large clickable areas
  2. Don’t use underlines
  3. Identify the current page
  4. Space out page links
  5. Provide Previous and Next links
  6. Use First and Last links (where applicable)
  7. Put First and Last links on the outside

Related References

  • An ultimate article about pagination, Pagination 1011, has already been written by Faruk Ates.
  • Style sheets freely available for free download: Some Styles For Your Pagination2.
  • If your weblog runs upon WordPress you can use WP-PageNavi3 plug-in to generate pagination “on the fly”. It’s easy to install, however, requires some changes in the source code of your WordPress theme.

Mistake #1: Navigation Options Are Invisible

Since pagination’s primary purpose is to serve as an improved navigation, it is supposed to make it clear for the visitors where they are, where they’ve already been and where they can go next. These three facts give users a complete understanding of how the system works and how the navigation should be used.

But most importantly, the navigation options should be visible. Hugg.com64 doesn’t follow this guideline. The color of the links has a very low contrast with the white background. The hover-effect isn’t provided.

Screenshot Pagination5
The color of the links on Hugg.com64 has a very low contrast with the white background. The hover-effect isn’t provided.

Mistake #2: Pagination Isn’t Intuitive

If you have to decide between a quite complex (but beautiful) pagination and a simple one with necessary functionality always prefer the simple solution. If users don’t understand the mechanism behind navigation they won’t be able to use it and therefore won’t use your web-site.

Helium.com1197 is a perfect example for this mistake. Take a look at the screenshot below: what do the arrows stand for? For the page you’ve already visited or for the page you are currently on? And why does the link to the second page have a white background color? Why do the arrows have different colors? This is unintuitive.

Screenshot Pagination8
Unintuitive pagination design on Helium.com1197

Unintuitive designs result from the lack of structure, hierarchy and well thought-out design decisions. “Blank” pagination is as unintuitive as overcrowded design solution.

Screenshot Pagination10
Our favourite example: Helium.com1197

Screenshot Pagination12
Not spaced out page links are harder to scan and to navigate through. Make-Believe.org13 as an example. The design is unintuitive.

Creative Solutions Can Be User-Friendly

The more frequently a design element is used, the harder it is for designers to introduce some creative approaches without risking to make the design less intuitive. Consequently, pagination designs have rather a variety of different patterns — revolutionary approaches are used very rarely.

However, creative approaches can be user-friendly. E.g. Dirty.ru1614 uses a slider-based pagination menu; users can drag it to get more available options, that means links to the older pages of the site.

Screenshot Pagination15
A slider on Dirty.ru1614

Erweiterungen.de1917, the German version of the official Firefox extensions web-site, provides more navigation options once the visitor clicks on the “…”-button.

Screenshot Pagination18
Further navigation options are displayed once the “…”-button is clicked. Erweiterungen.de1917.


Although “standard” pagination — linked blue numbers following each other — is very common for most web interfaces, designers tend to experiment with colors, forms, backgrounds and shapes.

The pagination doesn’t need to look nice aiming to captivate users’ attention; as a part of site navigation it offers users an important functionality and as such has to be used effectively. Still, visual clues can be helpful. In most designs blue and grey colors dominate — colors traditionally used by services.

Simple Enumeration


Screenshot Pagination21





Screenshot Pagination26



Colors and Shapes In Use

Often designers use colors to highlight the current page and separate it from the other pages. The numbers of the pages are also given a shape: a rectangle, a circle or a button. The current page is usually not linked.


Apple Store30


Screenshot Pagination32




Screenshot Pagination36

Screenshot Pagination

Screenshot Pagination37


Screenshot Pagination39

Screenshot Pagination40

Screenshot Pagination41


Screenshot Pagination43

Screenshot Pagination44

Screenshot Pagination45

Screenshot Pagination46

Screenshot Pagination47

Screenshot Pagination48

Screenshot Pagination49

Screenshot Pagination50

Screenshot Pagination51

Screenshot Pagination52

Screenshot Pagination53

Screenshot Pagination54

Screenshot Pagination55

Screenshot Pagination56

Screenshot Pagination57

Screenshot Pagination58

Screenshot Pagination59


Screenshot Pagination61

Screenshot Pagination62

Screenshot Pagination63

Screenshot Pagination

Screenshot Pagination64

Screenshot Pagination65

Screenshot Pagination66

Pagination With Manual Page Input

In some cases users can provide the number of the page they’d like to see manually, via the input-element. This is common for paginations with the limited number of options — e.g. in these designs you can’t jump to the last page if you’d like to.

Screenshot Pagination67


Screenshot Pagination69

Unusual Solutions

Screenshot Pagination70

Screenshot Pagination71


  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47
  48. 48
  49. 49
  50. 50
  51. 51
  52. 52
  53. 53
  54. 54
  55. 55
  56. 56
  57. 57
  58. 58
  59. 59
  60. 60
  61. 61
  62. 62
  63. 63
  64. 64
  65. 65
  66. 66
  67. 67
  68. 68
  69. 69
  70. 70
  71. 71

↑ Back to top Tweet itShare on Facebook

Co-Founder and former CEO of Smashing Magazine. Sven is now writing science-fiction and runs some web sites for fun - more or less ...

  1. 1

    This article is great! I’m doing a step-by-step system for my own site so it really came in handy, I was using a basic links 1,2,3 etc but now I might add some CSS to them and make them more user friendly!

    great article!

  2. 3
  3. 4

    It never crossed my mind how important is the pagination thing!
    Thanks for the great article

  4. 5

    YES! The UE is most important.

  5. 6

    Great timing. I’m in the middle of a final redesign before launching and adding pagination was one of my final tasks. Does anyone know how to code pagination into a wordpress template? So far, I’ve only come across this wordpress plugin.

  6. 7

    Guys, you’re outstanding! The magazine is a weekly blast of superlative, effective and useful articles. This one is perfect. And kudos to you right because is about a so important but too often underrated argument. Pagination is the core of this so overloaded world of informations and documents and answers that is the web today.

  7. 8

    The simplest is always the best. bold better than !

    Nice exhaustive gallery

  8. 9

    I think facebook has some of the best pagination styles. Super easy to read and understand how to use it.

  9. 10

    Wow..excellent pagination

  10. 11

    That’s great! I must add it on my site

  11. 12

    Sure I’m biased, but I really like my pagintation design for I’ve never seen anything like it on the web, and I even blogged about it a few months ago. Compact and versatile it is. Funny how you have Veer listed.

    • 13

      @Ryan. you’re right. That’s a pretty nice option. I definitely think ten or more links just to go from page to page is way too cumbersome. Your design balances the real-estate efficiencies found in some of the jump to entry field designs with the simplicity of clicking on a number. I’m sure others will feel that a single click to page 2 is better than the two required in your design. Also there is the added movement of scrolling the drop down. …At any rate, kudos! I like it.

      If anyone knows of an actual user study comparing, please post a link to results.

  12. 14

    I was just putting together a pattern library entry on pagination tools, this will be a great help. Thanks!

  13. 15

    Great article, simple and easy to use is the best option for Paginations. But that doesn’t mean they have to be ugly.

  14. 16

    Thanx a lot for that wonderful list!

  15. 17

    1..2..3..4..5 pagination is just not intuitive to begin with. Navigation is about context, and there’s no way to know what “3” is, at-a-glance.

    Keep the prev/next/first/last if you have to, but paginate, predominantly, based on something less-arbitrary than page number, like letter…

  16. 18

    Great post! You guys have inspired me to take another look at Paging possibilities.

    Another method of paging that I like is the simple dropdown. Tom’s Hardware, Anandtech and most other tech sites use this effectively.

  17. 19

    80% of the pagination examples are the same… =/

  18. 20

    Thank you for this good source of ideas. It’s always a lot of detail work but the navigation is so important for any website!

  19. 21

    Thanks a lot for this great article.

  20. 22

    I appreciate the range of themes that are shown and discussed on this blog. Pagination is so important and really worth to be thought about.

  21. 23

    Something that is not covered in this post is the possibility of having different levels of “granularity” in the display of page numbers, to give a better overview of the number of results and some means to browse more effectively by moving forwards and backwards in chunks of different sizes.
    This is useful especially in cases where the number of resulting pages is really big.
    E.g. for a query that returns 3500 pages:

    1 2 3 4...10...100...1000...2000...3000...3500 next >>

    or when we’re in the middle of the results:

    1...100...1000 ... 2000 ... 2234 2235 2236 2237... 2300...3000...3500 next >>

    Another point: I think it is far better to get rid of the links to first & last page, but always provide a means to go to the first & last page by clicking their numbers. It is VERY frustrating to click “last” instead of “next” and they’re often placed right next to each other.

    Of course, I do agree with Stephen that it is MUCH better to display something more relevant to the actual data than page numbers…

  22. 24

    Wow, thanks for using our pagination ( in one of your “good” examples. Love this site, too!

  23. 25

    Great article as always. One point for all to remember. The pagination design is important but design is nothing without function. Keep it simple keep it quick. So often I see people who grab all the data from the DB and then paginate the data object on the page, SLOW!! which then lets down the design.

    I like that all the examples highlight a key to pagination design, correct spacing between the page numbers. I have seen sites which bunch them together making quick clicking harder for novice computer users…Yes there are some still out there :)

  24. 26

    Another Fine article from smashingmagazine.
    Keep it UP friends.

  25. 27

    When I grow up, I want to marry

  26. 28

    these are great – thank you!

    what really drives me crazy is when default positions and hover positions don’t match…. I just love clicking the wrong link because it moved under my mouse…don’t you?

  27. 29

    I’m fairly impressed with the list. Stylish Labs & apple’s store — both look great but with usability in mind
    Ours at HostJury are good as well though, albeit we’re only using them on the blog: HostJury blog

  28. 30

    lets start a pagination hall of shame
    my first nomination is
    no next page widget and its hard to tell which page you
    are currently on

  29. 31

    I did something similar for the search forms:

    Search forms examples

  30. 32

    Hey, that’s pretty cool – I checkout out the wordpress plugin.

    I’m going to install it tomorrow, thanks for turning me on to it.

  31. 33

    Great inspiration for a very specific issue.
    Thank you!

  32. 34

    I was very proud discovering my paginator 3000 (paginator with slider created for among creative examples (= After this I desided to publish it’s source files in my blog Maybe it could be useful for somebody else (=

  33. 35

    Google’s search results pagination should be in the article listed under “Unusual Solutions”. It’s probably the most used pagination in the world, too.

  34. 36

    LAME :)

    All are the same.
    how about NOT conformist pagination:,

    still in early alpha but layout looks cool.

  35. 37

    Hello, I’ve liked this article a lot and would like to translate it to French and publish it to my website alongside other translations, with all the due backlinks and credits to you of course…

    Do I have your authorization ?

    Thanks in advance,
    Marie ALHOMME (webdesigner/front-end developer)

  36. 38

    Really fantastic analysis, could have used this about a month ago when we were designing our new pagination method. Although we’re using Flash and our content is all media, we think we figured out something new. We call it ‘Pagiscrolling’ ;) and I’d love to get opinions on it. Here’s a link to it’s use, and a place to critique it,

  37. 39

    Thank you for using our website’s pagination method, as an example, in this article! :)

  38. 40

    Real good summary of this topic. Pagination is a very difficult thing in modern web technologies. thank you for this awesome article.

  39. 41

    extreme webmaster

    December 6, 2007 9:03 am

    Basically, the best ones are those with numbers inside a square. They are far more usable, because the user has a bigger area to click on (rather than going for a digit between two other ones). Also, the selection is far more visible when the square changes the background color. And they look elegant too, and can be integrated in different kinds of designs and layouts.

  40. 42

    I am just now devising a paging system for a site – You couldn’t have timed this better!

    Welcome back!!!

  41. 43

    The article forgot to mention the site with the best pagination: Google Reader.

    Google Reader loads the older news while you are moving the scroll bar, no pagination links at all.

  42. 44

    Here’s my use of navigation buttons and a dropdown list to create a simple but effective paging system. Probably would not recommend it for pages over several hundred though.

    imageshack is a disgusting service. (SM editor)

  43. 45

    Incredible analysis!

    You Help-me!

    Thank you very much! :)

  44. 46

    Foxinni - Wordpress Designer

    January 20, 2008 1:06 pm

    Ah. I’ve been looking for a article like this for ages. Great job once again SM!

  45. 47

    bulklodd - developer

    February 18, 2008 4:32 am

    imho, pagination isn’t a good thing for a user, i’d prefer not to have it at all but i’m aware of the impossibility to avoid it. it’d be much better just get all you need on the first page and let users set how many results they want on one page. as matter of fact it’s not the implementation of pagination which drives me mad but the impossibility to set a number of results for a page!

  46. 48

    bulklodd: no offence but thank god you dont develop for Digg. Some sites definately require pagination to be usable.

  47. 49

    Agree. Even though my pagination allows to go First/Last/Previous/Next and go to surrounding pages (like three ahead and three behind to current page) as well as enter arbitrary page number – I think (after 6 years of doing it) this is more programmer’s approach on showing all you can rather than asking why user ended up on that page. If user was looking for something why the hell he will go to page 25 even if he can do it? Than why to offer him this option?

  48. 50

    If youb think of it this is what Google does: Results 1 – 10 of about 5,350,000 for ‘pagination’
    Have you ever clicked all 1-11?

    What CNET downloads search results does:
    Showing: 11-20 of 303 | Previous 10 | Next 10 … AND smart filters on top of table.

    Do you really need more than first couple of pages and smart filters to search within search results and or smart pagination which is based not on page number which is (total/items_per_page) but say each pagination node is month/year or week or day – so you can jump to ‘Jan 2008′ without guessing that it could be 10 pages back?
    This is what I call a creativity in ‘pagination’ :)

  49. 51

    This is completely useless. What is the difference between either of these pagination systems? You are only changing background color and font colors?
    I would extract information from the documents and classify them and put a number next to that. Only then will a 1 2 3 pagination be of any use.

    Ex: If you have 400 documents say about properties. Then classify them as below:
    single family units: 200 | Multi family units:100 | Commercial:100
    Make these 3 hyperlinks.

    Then if someone clicks on href=”single family units: 200″ show these 1 2 3 pagination.

    A user will be able to know that the documents he is clicking on one after the other are of similar type.

    Pritam the great

  50. 52

    Another Fine article from smashing magazine.
    Keep it UP friends.

    I wish u gr8 success in future …Plz provide a bit more articles

  51. 53

    Thank you for publishing it, but there is a problem when i dont speak russian :(

  52. 54

    It’s a very useful article indeed. I am not sure I can agree though with the no no to underlines. Since underlined text has become so powerful in pointing out links, why not use it in pagination? I mean if it’s consistent with the rest of design elements on the website, why not use it?

  53. 55

    Seyferf Hallendent

    August 7, 2008 9:06 am

    oh.. talking like you know everything…

    have you made programs before?

    its better to have reference so quit blabbin your hurtful words..

    these paginations were made to see if it fits for a website …

  54. 56

    super collection

  55. 57


    please make a 2008 update!

  56. 58

    Agree! I can’t find the original article by Faruk Ates (Pagination 101). Anybody has a link for it?

    Great article/reference anyway!

  57. 59

    Really nice article

    Pagination is the very important feature for those websites mainly who contains huge amount of information/library/gallery. The pagination part must be highlighted properly.

  58. 60

    nice article !

  59. 61

    Constantine Lovelorn

    December 17, 2008 3:33 pm

    This is my pagintion script on mootools framework.
    Can be used as you wish.

  60. 62

    The pagination technique used by is now available for WordPress blogs and can be found here here

  61. 63

    Smashing Magazine the bests!!

  62. 64

    cool article!!

  63. 65

    I like the Ajax next/previous scrolling here where next and previous are not loaded in new page but just instantly scroll in.

  64. 66

    It looks good. Like the one on this flash humour site

  65. 67

    Great Article about pageination. And I found there are some simmilar ones on this site.
    Thanks for sharing…

  66. 68

    Nice job with overview of pagination design patterns.

    New to Flex and it seems to have no pagination controls for a datagrid/table. On to writing a custom control.

    Thanks a bunch

  67. 69

    DIRTY.RU PAGINATION rocksssss……

  68. 70

    nice paginations

  69. 71

    I don’t like when numbers and arrows are in reversed direction, some designers think it’s better.

  70. 72

    Excellent! Great to see people putting some thought into UI design, even if it’s something minute like pagination.

  71. 73

    awesome collections.

  72. 74

    Maciek Saganowski

    March 10, 2010 8:21 am

    Thanks for this article. It inspired me to write a post on brower aids in navigating search results.

  73. 75

    This article is just amazing…

  74. 76

    Nice article! wish I saw it earlier…
    I wrote an article about pagination but focused more on the “getting the data” side then on the presentation. The idea is I didn’t want to make a database query for every page and decided to query more pages (one block) at once and use javascript to make one page visible and the rest hidden. This makes the navigation pretty fast I think.
    (sorry most of other stuff are in Dutch…)
    Hope this helps getting the data to present using your very nice examples!

  75. 77

    really good stuff,!!!
    I love it~~

  76. 78

    Sathyanarayana sastry

    April 19, 2010 12:23 am

    Excellent. Really useful.

  77. 79


    April 28, 2010 1:31 am

    Nice article, where is the 2010 review?

    Wrote down some thoughts (in german) on page navigation as well:

  78. 80

    Kool pointers! Just wanted to add on to the good practices for developers, ensure that the current page number is not a link! Present it as plain text and not as a clickable link.

  79. 81

    I wrote an article about pagination but focused more on the “getting the data” side then on the presentation. The idea is I didn’t want to make a database query for every page and decided to query more pages (one block) at once and use javascript to make one page visible and the rest hidden. This makes the navigation pretty fast I think.

  80. 82

    thanks a lot for this article :) excellent!

  81. 83

    Pagination is very important as a part of site navigation.
    Thanks for Great Articles. Excellent really useful.

  82. 84

    Good Article …..

  83. 85

    Nicely done. Really lays it out in ways I would have been hard pressed to accomplish. Thank you.

  84. 86

    A new form of pagination that’s even more visible, intuitive and user-friendly is an accordion pagination. It works great for multiple page forms, articles and tours. It can be easily implemented with jQuery. Check it out:

  85. 87
  86. 88

    Hendrik P de Ruijter

    February 28, 2011 11:04 am

    What I usually find difficult with pagination on a sorted list is that you don’t know where you are. Suppose you wanted an article that starts with K, and you start browsing at page 1 of 160 (all items probably start with A). You will have to browse through about 10 pages before you arrive at K, as you are not sure where it starts exactly.

    I recently came across a solution: when you hover over the page numbers, a hint shows you the first and last item on the page. It even works when you sort on price. You can see it in action here: (I am not spamming, this is not my site (I wish!), but it is a great improvement over traditional pagination.)

  87. 89

    Why majority of pagination controls on different apps and websites does not consist “Go To Page” feature? is there any rationale behind? I feel its a serious usability flaw. Any comments?

  88. 90

    Pagination without a “jump to page 32″ search can be annoying especially if you are limited to navigating four pages at a time. I was considering pagination on a themed wordpress blog, but i’m not sure if it just distracts on this occasion. Would a site like need it?

  89. 91

    Anirban Adhikari

    March 17, 2011 6:42 am

    Excellent ….Really good article.Thanks.

  90. 92

    Ramesh Vishwakarma

    May 5, 2011 4:42 am

    We can say in Hindi… “Bole to jhakkassss hai bidu…” Really love the collection of pagination.

  91. 93

    wicker patio sets

    June 19, 2011 10:09 am

    more great information..Thanks! Love the website

  92. 94

    The one thing all of these designs have in common? They are all using TINY NUMBERS in TINY BOXES! C’mon people. Pfffft!

  93. 95

    The Pagination 101 link at the beginning of the article is dead. Other than that, a great article! Thanks!

  94. 96

    This article is missing a lot of things. First of all, when is it appropriate to handle pagination? Is it better to paginate long continuous copy, or is it better to scroll copy?
    What about the use of nested pagination? For example, I have a section labeled ‘Profiles’ and in it, I have 20 profiles that I want to paginate. How do I paginate the main content and the subcontent effectively; or is it possible to do nested pagination?

    For the design pure, you forgot to mention some of the best pagination techniques like thumbnail previews on rollover, continuous scrolling pagination with discrete points of interest, the entire spectrum of icon-based pagination, the entire grid-based pagination method, and the trending pagination styles. You also mention that the current page should not be linked, but you neglected to mention that it should not look like the other pages…especially the mouse-hover link. If possible there should be a continuum between the “normal”, “hover”, and “active” states of the page links. Your examples show several places where it is unclear at first glance if there are two current pages or if the mouse is just making it look that way.

    So, these are all basic nitpicky complaints, I’ll concede. But the fact that none of the links provided actually work…that’s rough.

    I love Smashing and find lots of great info and inspiration here. Unfortunately, this article just doesn’t cut it. Please reconsider or revisit this topic. Heck, contact me and I’ll revisit it for you. Thanks for your hard work, regardless.

  95. 97

    Great Help! Thanks :)

  96. 98

    Some great ideas, although it would be better if the link at the beginning… “Pagination 101″ was working. The team found the rest of the article very handy.

  97. 99

    Why do developers include a range of page numbers anyway? ( I mean the often-seen row of page numbers, often with an ellipsis between a range)

    Do site visitors ever really want to jump to see what’s on page 6 (for example), on some sort of whim? I mean, why would they want to?

    Isn’t “previous” and “next” (perhaps with an option to go to the first and last pages) all that is required?

    I’d like to hear the reasons why people would want to click on arbitrary numbered pages.

  98. 100

    Our’s is pretty simple, but I never really thought much about the pagination design. Most people will probably stay on the first page, but I do wonder if it’s well designed more people will use it. You can check it out here

  99. 101

    Can you please explain how pagination effects ranking in google. I used pagination for my WordPress website in my posts. Please tell me is good for SEO if I divide my page into multipage using or will it effect my ranking?

  100. 102

    I like the second one a lot! Right now I have to find a suitable pagination for my own website: If any one has a good suggestion, I would be grateful :)

  101. 103

    I’m using Joomla. All these styles work very well on pagination of my articles in categories view, but not on my single articles view… Have you got an idea of my problem ? Regards.

  102. 104

    In truth well-off content and exceptionally constructive information. I got it my resolution from over here. I exceedingly propose his/her moving parts with the constructive edifying information. Thanks a lot………..


↑ Back to top