14 Tab-Based Interface Techniques


The popularity of tabs, well-known from tabbed document interfaces1 (TDI), is rapidly growing, challenging the creativity of both developers and designers. The development of efficient and user-friendly interfaces is quite hard to deal with, and tabs can guarantee a quick access to information without need to open and close dozens of windows at the same time. Tabs-based interfaces allow multiple documents to be contained within a single window and tabs can be used to navigate between them. And exactly this idea is being used more frequently recently.

However, it doesn’t have to be that complex. Using modern approaches, you can create and improve tab-based interfaces in few minutes. With CSS, JavaScript, DHTML and XMLHttpRequest (alltogether Ajax) almost everything is possible. Information isn’t loaded in new windows, but loaded instantly with Ajax-based techniques. You can also use Back-button without worrying about losing your data.

Let’s take a look at some of the most interesting techniques we’ve found in the Web, searching for tab-based interface techniques.

Freeware Tab Interaces

Based upon Prototype Javascript Framework.


Javascript Tabs vom Stilbüro
Based upon jQuery | Demo5


Yahoo TabView
A part of UI Library | Demos8


TabPanel10 provided by Google Web Toolkit.
Tabbed Panels11, provided by Adobe Spry Framework12.

AJAX Tabs Content Script13
Classic from Dynamic Drive.


Tab Panes15
in two versions by DHTMLGoodies, with Close-Buttons. Demo I16 | Demo II17


JavaScript Tabifier19



Ajax Project – Tabbed Page Interface21


DOMTab – Navigation tabs with CSS and DOMscripting23 is presented in two versions.




Works as MouseOver without mouse click.


Shareware Tab Interaces

dhtmlxTabbar 29
Sometimes less is really more. It doesn’t have to be so complex – from a shareware package.


ActiveWidgets 2.031
A component of a shareware package.


Zapatec Tabs33
Many versions, not freeware.



  1. 1 http://en.wikipedia.org/wiki/Tabbed_document_interface
  2. 2 http://livepipe.net/projects/control_tabs/
  3. 3 http://livepipe.net/projects/control_tabs/
  4. 4 http://stilbuero.de/2006/05/13/accessible-unobtrusive-javascript-tabs-with-jquery/
  5. 5 http://stilbuero.de/jquery/tabs/#section-1
  6. 6 http://stilbuero.de/2006/05/13/accessible-unobtrusive-javascript-tabs-with-jquery/
  7. 7 http://developer.yahoo.com/yui/tabview/
  8. 8 http://developer.yahoo.com/yui/examples/tabview/index.html
  9. 9 http://developer.yahoo.com/yui/tabview/
  10. 10 http://code.google.com/webtoolkit/documentation/com.google.gwt.user.client.ui.TabPanel.html
  11. 11 http://labs.adobe.com/technologies/spry/articles/tabbed_panel/
  12. 12 http://labs.adobe.com/technologies/spry/
  13. 13 http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/
  14. 14 http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/
  15. 15 http://www.dhtmlgoodies.com/index.html?whichScript=tab-view
  16. 16 http://www.dhtmlgoodies.com/scripts/tab-view/tab-view.html
  17. 17 http://www.dhtmlgoodies.com/scripts/tab-view/tab-view-demo2.html
  18. 18 http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/
  19. 19 http://www.barelyfitz.com/projects/tabber/
  20. 20 http://www.barelyfitz.com/projects/tabber/
  21. 21 http://www.crackajax.net/tabs.php
  22. 22 http://www.crackajax.net/tabs.php
  23. 23 http://onlinetools.org/tools/domtabdata/
  24. 24 http://onlinetools.org/tools/domtabdata/
  25. 25 http://phrogz.net/JS/Tabtastic/index.html#overview
  26. 26 http://phrogz.net/JS/Tabtastic/index.html#overview
  27. 27 http://www.kollermedia.at/archive/2007/02/20/download-tabmenu-for-free/
  28. 28 http://www.kollermedia.at/archive/2007/02/20/download-tabmenu-for-free/
  29. 29 http://scbr.com/docs/products/dhtmlxTabbar/index.shtml
  30. 30 http://scbr.com/docs/products/dhtmlxTabbar/index.shtml
  31. 31 http://www.activewidgets.com/grid/
  32. 32 http://www.activewidgets.com/grid/
  33. 33 http://www.zapatec.com/website/main/products/tabs/
  34. 34 http://www.zapatec.com/website/main/products/tabs/

↑ Back to topShare on Twitter

Co-Founder of Smashing Magazine. Former writer, web designer, freelancer and webworker. Sven is now writing Science Fiction Stories.

  1. 1

    Great list!


    BTW, its ‘interface’ not ‘inferface’ :)

  2. 2

    Vitaly Friedman & Sven Lennartz

    April 18, 2007 1:59 am

    OMG… thx mike! ;-)

  3. 3

    Again, another great list!

  4. 4

    Both are wrong!

    Its Freeware Tab Interfaces, not Interace

  5. 5

    Awesome List. Pulled some good stuff from these, which I needed. I love this website. Can’t wait for the next design showcase post. :)

  6. 6

    Are you guys looking over my shoulder? I was working on a cute little tab-based interface – nothing as cool as what you have here. This post should save me a few hours upfront and countless hours in maintenance.


  7. 7

    Did you wait for me to spend four hours yesterday before posting this? :P

  8. 8

    Did you wait for me to spend four hours coding yesterday before posting this? :P

  9. 9

    Canadian Soldier

    April 18, 2007 4:57 am

    Thank’s for the great list , as always very nice research ;)

  10. 10

    Thanks for the list.

    Please note there’s a typo “Interaces” (twice) :-)

  11. 11

    Great list!


    BTW, its ‘interface’ not ‘inferface’

  12. 12

    Great list, excellent information. This is my first post but i am a frequent visitor. Please plan a organized section for new designers and developers.

  13. 13


  14. 14

    I made some research a couple of months ago in search for the perfect tabbed interface. All but Barelyfitz’ Tabber have the same flaw : their markup is semantic non-sense, ie there’s a UL list, then the tabs, which makes absolutely no sense when printed. On the contrary, Tabber starts from correct and sensible markup, and then generates a clean tabbed interface.

  15. 15

    Thanks bro, this is just what I needed :)

  16. 16

    great list, thanks, i was just starting the other day to look for some examples, as i have to use this method in a project.
    great work!

  17. 17

    great list, i’ve almost tesed all that solutions, some are great ( JavaScript Tabifier ) but that magic is a little calmed down by some function that aren’t fully cross-browser ( JavaScript Tabifier and ajax loading failing with IE for exemple, or Ajax Tabs Content script ) so take care not choosing a solution, deploying and in fine discovering that it’s broken on some browser.
    That’s why i recommande YUI, as it’s the almost unique one which is fully-CP certified.

  18. 18

    You missed some, like MooTabs and Digitarald’s Tabs for mootools ;-) If you want to know more they are in my mootools plugins list (french).

    There was the net4visions.com prototype tabs script too, the original site is down, but you can grab a copy there.

  19. 19

    Regarding ‘dhtmlxTabbar ‘





    “Step away from the interface and lay down your mouse, sir”

  20. 20

    Brilliant as usual :)

  21. 21

    Excellent list. Very informative, to the point and fun!

  22. 22

    nice examples. i think we will see much more of theses techniques in the near future. thanks

  23. 23

    Terinea Tech Tips

    April 18, 2007 10:52 pm

    Just make sure that you test with all internet browsers!

  24. 24

    Ext has a really nice, robust tab interface: http://extjs.com/deploy/ext/examples/tabs/tabs.html

  25. 25

    This is right on time post :)

  26. 26

    Are there any here that can handle 2 rows of tabs? As in, when the number of tabs (or the lengths of their labels) causes the tab row to be wider than the container?

    I’ve all but given up on tabs, because I can never get anyone to agree on labels short enough to fit. Fluid layouts complicate this even further…

  27. 27

    Jake Teton-Landis

    April 19, 2007 6:46 am

    It looks like you forgot Adobe’s Spry tabs. They are neatly integrated into Dreamweaver CS3, but anyone can use them. They are great, incredibly styleable, and very lightweight (if you take out all the comments they leave in for you).

  28. 28

    thanks! really useful

  29. 29

    Another Typo — It should be Interfaces (note the F) you have “Freeware Tab Interaces” and “Shareware Tab Interaces”

    PS. Great articles!

  30. 30

    Himm Very excellent list. I used some tabs ;)

    Thanks for share

  31. 31

    Agus Suhartono

    May 2, 2007 2:27 pm

    Hi, you forgot WebFX Tab Pane (http://webfx.eae.net/dhtml/tabpane/tabpane.html). This widget used by Joomla and Mambo CMS.

  32. 32

    I’ve tried WebFX and cannot get more than 2 tabs to work. I’ve tried to use Adobe Spry Framework and it doesn’t work right of the bat and no support from Adobe. Just other users sayng “I don’t know what to tell you. It works for me.”

    I just got a fix from the Adobe forum and am sticking with the Spry stuff altogether.

  33. 33

    I am here for the frst time. i got surprised after seeing such detailed informations which are io think not available any where else.
    Overall is a good work done!

  34. 34

    The only problem with tabbed interfaces are still the search engines crawling…

    Most of the scripts aren’t friendly to search engines.

  35. 35

    How to add tab on the fly? I have used the dhtmlxTabbar on my page and it has button for adding new tab and to delete tab. But I don’t how to make it..

    Thanks you


  36. 36

    only u need to add … when user hit the button.. with the help of javascript.. just googled the problem…

  37. 37

    This list is good, but it would be way better if you could list the advantages / disadvantages of each…


  38. 38

    How can i make these tabs dynamic adding tabs into tabcontainer according to the fields retrived from database. also along with adding fields have to add dynamically data into it?? any suggestions


  39. 39

    I’ve also wrote a list of free Ajax tab samples on my blog, you can read it at http://www.geektips.net/108/ajax-tabs-the-amazing-samples.html

  40. 40
  41. 41

    special thanks..

    great post..

  42. 42

    very good tutorial find more
    click here

  43. 43


  44. 44

    Thanx Nice

  45. 45

    I want tabs to load external pages data, when clicked.

    When a tab is clicked, It would display a waiting icon till the related data is downloaded from an external page linked with that tab.

  46. 46

    You have a spelling mistake in “Freeware Tab Interaces” it should be Interfaces.

    Rajivk1 – if you want to load external data & want to show the loading icon – please use Ajax. In now days you can do it quite easily. :)

  47. 47

    Great list!

    Nice collection.


  48. 48


    There also another css tab named boxy tab. you can find it on tahSin’s gaRAge. thanks.

  49. 49

    Your article helped me a lot

  50. 50

    Please correct the spellings in >> “Interaces”, it should be interfaces!

↑ Back to top