I have page that lists previous recipients of an award, with tabs separating each year's winners.

  • Every year there are forty recipients.
  • The recipient's name is listed, along with his or her job title and company.
  • The same person can be selected in up to three different years.
  • Three year winners go into the hall of fame, though that's not represented here.
  • Currently, each year's winners are displayed on a separate tab.

The problem is I'm running out of space. After next year, there won't be room to add more tabs. What's another way to organize this data that will work well for up to 20 total years of awards?

Screenshot of tab interface

Note: Thanks Robert Fraser for the name "Tab Overflow."

  • A drop-down box would be better for a list of years.
    – user371
    Commented Jan 26, 2011 at 22:25
  • I think the tabs have outlived their usefulness.. it is probably not the ideal design pattern once you have too many. I am sure users of Microsoft applications of the past can attest to that.
    – Michael Lai
    Commented Jun 29, 2014 at 23:28

13 Answers 13


How about just showing the last 10 years of awards with the 11th tab to take you to the previous 10 years?

2011 | 2010 | 2009 | 2008 | 2007 | 2006 | ... | Older

Most people are only going to be interested in the most recent awards, so having the older awards a second click away shouldn't be a big problem.

Clicking on "Older" would show a page with the following tabs:

Recent | ... | 2000 | 1999

but would otherwise look identical to the current page. You could change the colour scheme just as an extra visual clue, but that would be up to the "powers that be".

  • This would work too, and you would get to keep your tabs(which users tend to like) Commented Aug 12, 2010 at 13:04
  • I was thinking about this and depending on how this is being maintained, it may be more difficult to keep the tabs going over time. Each year you will have to change the years on the tabs and add the oldest to the "Older" tab. Not that bad if you have code dynamically generating the tabs anyway, but if you are manually maintaining it might be a pain. Commented Aug 12, 2010 at 13:13
  • Yes. The powers that be in this case like the tabs. Commented Aug 12, 2010 at 13:14
  • I'm not 100% clear what would happen when you click the "older" tab. Show 120 rows (if there are three "older" years? Commented Aug 12, 2010 at 13:16
  • 1
    @Patrick McElhaney - I would just show a page with "Recent | ... | 2000 | 1999" tabs. I'll update the answer.
    – ChrisF
    Commented Aug 12, 2010 at 13:24

You could have a '...' tab and use some JavaScript (yay jQuery) to "scroll" to the right when you click it and reveal the other tabs. Then you could have an arrow on the left so you can go back to the newer tabs. (TY @ChrisF for the inspiration)

  • 1
    Agreed. This was my first thought too. I think it could be implemented as a very practical AND visually appealing solution. Commented Aug 12, 2010 at 18:25
  • 3
    What would happen without JS though?
    – matt-oakes
    Commented Aug 12, 2010 at 22:24
  • 1
    Great point. As with most fun technologies, you need to keep graceful degradation in mind. You would probably have to go with something along the lines of what ChrisF is suggesting. Test for JavaScript support and fall back on a "..." tab that loads a new page with the older years on it. Commented Aug 13, 2010 at 0:08
  • I'm thinking without JS it should just display separate tables for each year in one long page. That would be good for printing too. (It does not degrade gracefully now. Nor does it does it use internal (#) anchors to enable linking directly to a tab. Hangs head in shame.) Commented Aug 13, 2010 at 1:12
  • Well, with JavaScript disabled you can still view all of the past winners, you just can't tell what year they are from. So it isn't a complete fail =P Maybe you can add another column with the year on it and hide the column with css if they have JavaScript, show it if they don't. Commented Aug 13, 2010 at 1:51

For the record, I like @ChrisF's answer, but just for kicks here's how Google Spreadsheets handles it.

alt text

  • Google takes it cue from MS Excel, which takes its cue from any old page control. Since their inception page controls (the host for all the tabs) have used arrow buttons to scroll the tabs in and out of view. Commented Jan 15, 2011 at 14:19

I would probably add a bar above the listing and put a dropdown to select the year on the left side of the bar. You would then also have room to add other filtering options via dropdown, that is if any would be useful.

  • +1: was going to suggest this as an option. A drop-down would also allow for easy access to entries not in the immediate vicinity.
    – mummey
    Commented Jan 17, 2011 at 18:14

Tabs might not be the right metaphor to use for pagination. If you want to avoid reloading the page to get to years that don't fit in the given space, a scrolling horizontal list may work better.

Check out the products list at the top of Apple's Mac page.

Your list of years is never going to grow ridiculously huge, so you don't need to worry about the typical pagination issues of hiding non-immediate pages, etc:

« ‹ ... 148 149 150 151 152 ... › »

It's probably best to find a way to list all years and occlude the ones that aren't immediately relevant.


If the years are not that many, you can put the 'older' years under a drop down menu at the end.

enter image description here


You can do like Firefox. There is a scroll for hidden tabs. so you can load tabs more than the space you have. Or you can do like Chrome, make tabs smaller by adding more tabs ( this solution won't work for your case, because making tabs smaller, cause labels disappear ). I think having scroll area for tabs is the best solution. in this way user has no limit. You can add a drop down list so user can switch between pages quickly.


Since you do have a bounded set for your tabs (you mentioned "20 years" worth) you could use "vertical tabs" -- sort of like how most blog software has "categories" or "archives" in a sidebar. Then, if necessary, you could put the most important/high traffic items in an easy-to-use format at the top above where your current tabs are.

For example, my website (an out-of-the-box template) has an "Archives" list running down the left side.


(Note I'm not trying to pimp my site, it was just what came to mind first because I knew what I was looking for :) )


Like others here, I'd suggest getting away from tabs too.

But if you're stuck with them, you can just cram more tabs into the row and shrink them. (I'm thinking of Chrome's tabs.) When they're too narrow for their labels to fit in, truncate the labels. In your case, you'd want to truncate the beginning of the years:

| ..12 | ..11 | ..10 | ..09 | ..08 | ..07 | ..06 | ..05 | ..04 | ..03 | ..02 | ..01 | ..00 | ..99 |

Certainly not optimal, but it might placate the client until they agree to ditch the tabs.


You could also display the tabs that you think are going to be most frequently used (or up til the past 10 years). At the end, have a tab that says "Older" and that displays a list of the remaining older years when clicked, using JavaScript. This approach might not work so well if you eventually have so many older years to display that the list is really long. This also does not take into consideration what you would do for users without JS enabled.


Maybe the tabs aren't the best way to display them. But if you don't want to break the classic navigation, you should put 2 arrows, ones point to the left and the another one to the right.


Next tab, previous tab, next page of tabs, previous page of tabs, buttons are necessary, but not enough.
- Scrolling to a remote tab would be really annoying.

Try using hierarchical tabs - decade tab with year tabs inside.
Also, let user jump directly to the desired tab, by entering the year.


All those tabs also make it a very busy and noisy design. I also think that tabs are better suited to group different sets of data, not variations of the same.

I would suggest something like a drop-down with previous/next buttons on either side. Or a list in a sidebar or something.

Do you expect your users to browse through the years, just out of curiosity, or would they want to review the awards of a particular year? In the latter case, a text field would even be faster.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.