Take the 2-minute tour ×

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."

share|improve this question
A drop-down box would be better for a list of years. –  rightfold Jan 26 '11 at 22:25
add comment

13 Answers

up vote 40 down vote accepted

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".

share|improve this answer
This would work too, and you would get to keep your tabs(which users tend to like) –  LoganGoesPlaces Aug 12 '10 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. –  LoganGoesPlaces Aug 12 '10 at 13:13
Yes. The powers that be in this case like the tabs. –  Patrick McElhaney Aug 12 '10 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? –  Patrick McElhaney Aug 12 '10 at 13:16
@Patrick McElhaney - I would just show a page with "Recent | ... | 2000 | 1999" tabs. I'll update the answer. –  ChrisF Aug 12 '10 at 13:24
show 4 more comments

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)

share|improve this answer
Agreed. This was my first thought too. I think it could be implemented as a very practical AND visually appealing solution. –  Joel Glovier Aug 12 '10 at 18:25
What would happen without JS though? –  matto1990 Aug 12 '10 at 22:24
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. –  LoganGoesPlaces Aug 13 '10 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.) –  Patrick McElhaney Aug 13 '10 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. –  LoganGoesPlaces Aug 13 '10 at 1:51
add comment

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

alt text

share|improve this answer
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. –  Marjan Venema Jan 15 '11 at 14:19
add comment

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.

share|improve this answer
+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 Jan 17 '11 at 18:14
add comment

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.

share|improve this answer
add comment

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.

share|improve this answer
add comment

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 :) )

share|improve this answer
add comment

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.

share|improve this answer
add comment

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

share|improve this answer
add comment

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.

share|improve this answer
add comment

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.

share|improve this answer
add comment

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.

share|improve this answer
add comment

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.

share|improve this answer
add comment

Your Answer


