
Smashing Magazine we smash you with the information that will make your life easier. really.
14 Tab-Based Interface Techniques
April 18th, 2007 in Developer's Toolbox | 90 Comments
The popularity of tabs, well-known from tabbed document interfaces (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
Control.Tabs
Based upon Prototype Javascript Framework.
Javascript Tabs vom Stilbüro
Based upon jQuery | Demo
Yahoo TabView
A part of UI Library | Demos
TabPanel provided by Google Web Toolkit.
Tabbed Panels, provided by Adobe Spry Framework.
AJAX Tabs Content Script
Classic from Dynamic Drive.
Tab Panes
in two versions by DHTMLGoodies, with Close-Buttons. Demo I | Demo II
Ajax Project - Tabbed Page Interface
DOMTab - Navigation tabs with CSS and DOMscripting is presented in two versions.
Tabmenu
Works as MouseOver without mouse click.
Shareware Tab Interaces
dhtmlxTabbar
Sometimes less is really more. It doesn’t have to be so complex - from a shareware package.
ActiveWidgets 2.0
A component of a shareware package.
Zapatec Tabs
Many versions, not freeware.
Leave a Reply
Sponsors
- Advertise with us!
Smashing Links
Popular Posts
- 100 Wordpress Themes
- 83 Wordpress Themes
- 80 AJAX Solutions
- 53 CSS Techniques
- 40 Free Fonts
- 50 Beautiful Designs
- 50 Simple Designs
- 45 Fresh Designs
- 30 Dark Designs
- 65 Flash Designs
- Beautiful Icon Sets
- Beautiful Wallpapers
- Beautiful Photos
- Free Design Templates
- Free CSS Layouts
- Photoshop Tutorials
- Illustrator Tutorials
All Posts
- 35 Designers × 5 Questions
- 50 Designers × 6 Questions
- 404 Error Pages
- AJAX Libraries
- AJAX Solutions
- Badges and Pins
- Black & White Photography
- Block Quotes
- Blog Designs
- Blog Headers
- Book Covers
- Brochures and Booklets
- Browsers Round-Up
- Browser Test Suites
- Buzz-Monitoring
- Calendar Designs
- Charts and Diagrams: Tools
- Cheat Sheets
- Code Beautifier
- Copyright Explained
- CSS Coding Techniques
- CSS Designs 1, 2, 3, 4, 5
- CSS Editors
- CSS Expert Ideas
- CSS Float Theory
- CSS Frameworks
- CSS Free Templates
- CSS Footers
- CSS Forms 1, 2
- CSS Frameworks
- CSS Galleries
- CSS Ideas
- CSS Layouts
- CSS Menus
- CSS Print-Layouts
- CSS Specificity
- CSS Styleguides
- CSS Tables
- CSS Tutorials
- CSS-Techniques
- CSS Tools
- Data Grids and Tables
- Data Visualization 1, 2
- Date Stamps
- Design Books 1, 2
- Design Magazines
- Designer's Checkpoints
- Divine Proportion
- Domain Tools
- Dreamweaver Tutorials
- E-Mail Delivery
- Favicons 1, 2, 3, 4, 5, 6
- Firefox Themes
- Fireworks Tutorials
- Flash Designs
- Flash Slideshows
- Flash Tutorials
- Fonts 1, 2, 3, 4, 5, 6
- Form Design Patterns
- Forums
- Gadgets 1, 2, 3
- Google AdSense
- Google PageRank
- Graphics Design
- Grid-Based Design 1, 2
- Grunge Design 1, 2
- Hand-Drawing Style 1, 2
- Handwriting and Lettering
- Hotkeys
- HDR Pictures
- HTML Template Systems
- Icon Sets 1, 2, 3, 4, 5
- Icons, Templates 1, 2, 3
- Illustrator Tutorials 1, 2
- Laptop Sleeves
- Laptop Designs
- Link Building
- Links in New Windows?
- Mascots
- Motion Graphics
- Music Videos
- Navigation Menus
- Newspaper Designs
- Online Converters
- Online Generators
- Packaging Design
- Pagination
- PDF Magazines
- Photoshop Tutorials 1, 2
- Pixel Art
- Podcasts
- PNG Transparency
- Portfolios
- Product Designs
- RSS Best Design Practices
- RSS Feed Icons
- Screensavers
- SEO Tools
- Shopping Carts
- Short Movies
- Slideshows & Lightboxes
- Source Code Editors
- Splash Pages
- Start Pages
- Stock Icons
- Space, Nebula wallpapers
- Tab-Based Interfaces
- Tag Clouds
- Textures
- Textures & Backgrounds
- Texture Design
- Tooltips Scripts
- Tutorials
- Typefaces 1, 2
- Type Setting Principles
- Typography Showcase
- Typography BIG 1, 2
- Typographic Posters
- Typography In Motion
- Typography Showcase
- Usability Books
- Usability Glossary
- Usability Nightmares
- Usability Principles
- User Interfaces
- Vintage and Retro
- Wallpapers 1, 2, 3, 4
- Web 2.0 Tutorials
- Whitespace & Simplicity
- Wordpress Plugins
- Wordpress Themes 1, 2, 3, 4
- WYSIWYG Editors
Webtips
Sideblog
Henry Jones presents 400 High Quality Patterns — a collection of patterns of all shapes, sizes, and color. Some are images, and some are pattern files for Photoshop and Illustrator.
Facebook and YouTube Icons is a free set of fresh Leopard-optimized Facebook and YouTube icons (512×512px). Formats: .icns, iContainer.
How many blogs give link credit? Phrases like “via Boing Boing” and “via Instapundit” are ubiquitous in the blogosphere. But this is far from universal. Simon Owens knows.
WordPress Function List is a quick cheat sheet and a reference guide to expedite WordPress theme development.
Learning Web Standards just got easier. Opera's new Web Standards Curriculum is a complete course to teach you standards-based web development, including HTML, CSS, design principles and JavaScript basics.![]()
Eye Movement Patterns Study presents results of a recent research on single and dual-column web pages, encouraging 2-column presentation for articles published online. [via]
David Leggett shares 5 Pixel Popping Techniques for Adobe Photoshop. Among them the 2 pixel divide effect, the pixel shadow and the shadow highlight.
The most memory efficient browser is Firefox 3.0. Not only trumps its older version, but every other popular offering on Windows. Sam Allen's findings.

Everyday Icons offers over 30 sets of beautiful patterns and icons for free download. Some of them are just sexy. 
Finetuna is a free service that allows you to upload an image, comment on it and share it with clients and co-workers. Firefox-extension is available as well. Useful.




















Mike B (April 18th, 2007, 1:16 am)
Great list!
thanks.
BTW, its ‘interface’ not ‘inferface’ :)
Vitaly Friedman & Sven Lennartz (April 18th, 2007, 1:59 am)
OMG… thx mike! ;-)
Joey (April 18th, 2007, 3:24 am)
Again, another great list!
Jose Maria (April 18th, 2007, 3:46 am)
LOL!
Both are wrong!
Its Freeware Tab Interfaces, not Interace
Robert (April 18th, 2007, 3:49 am)
Awesome List. Pulled some good stuff from these, which I needed. I love this website. Can’t wait for the next design showcase post. :)
fijis (April 18th, 2007, 4:33 am)
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.
Thanks!
Echilon (April 18th, 2007, 4:54 am)
Did you wait for me to spend four hours yesterday before posting this? :P
Echilon (April 18th, 2007, 4:55 am)
Did you wait for me to spend four hours coding yesterday before posting this? :P
Canadian Soldier (April 18th, 2007, 4:57 am)
Thank’s for the great list , as always very nice research ;)
Fernando (April 18th, 2007, 7:25 am)
Thanks for the list.
Please note there’s a typo “Interaces” (twice) :-)
tv online (April 18th, 2007, 7:54 am)
great list, I don’t recommend the shareware ones as you can find similar tabs available for free or you can easily modify ones listed here easily to get the same effect.
工控网 (April 18th, 2007, 9:28 am)
Great list!
thanks.
BTW, its ‘interface’ not ‘inferface’
Gautam (April 18th, 2007, 11:53 am)
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.
北京 (April 18th, 2007, 2:13 pm)
谢谢你的文章!每天会因为看到您的文章而高兴!因为我又可以学到好东西了!
Ozh (April 18th, 2007, 2:20 pm)
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.
Yogi (April 18th, 2007, 3:03 pm)
Thanks bro, this is just what I needed :)
szek (April 18th, 2007, 3:41 pm)
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!
zobla (April 18th, 2007, 4:14 pm)
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.
Boris (April 18th, 2007, 4:41 pm)
You missed some, like MooTabs and Digitarald’s Tabs for mootools ;-) If you want to know more they are in my Link [gueschla.com].
There was the net4visions.com prototype tabs script too, the original site is down, but you can grab a copy Link [www.komeco.com.br].
Ian Lloyd (April 18th, 2007, 5:23 pm)
Regarding ‘dhtmlxTabbar ‘
“Eeeek!”
and
“What?!!!”
and
“Step away from the interface and lay down your mouse, sir”
Ivan Minic (April 18th, 2007, 6:16 pm)
Brilliant as usual :)
vickeybird (April 18th, 2007, 6:48 pm)
Excellent list. Very informative, to the point and fun!
Kai (April 18th, 2007, 10:05 pm)
nice examples. i think we will see much more of theses techniques in the near future. thanks
Terinea Tech Tips (April 18th, 2007, 10:52 pm)
Just make sure that you test with all internet browsers!
Brad Harris (April 18th, 2007, 11:24 pm)
Ext has a really nice, robust tab interface: Link [extjs.com]
Paul (April 18th, 2007, 11:32 pm)
This is right on time post :)
Marty (April 19th, 2007, 3:25 am)
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…
Jake Teton-Landis (April 19th, 2007, 6:46 am)
It looks like you forgot Adobe’s Link [labs.adobe.com]. 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).
L (April 20th, 2007, 3:47 pm)
thanks! really useful
James (April 21st, 2007, 10:29 pm)
Another Typo — It should be Interfaces (note the F) you have “Freeware Tab Interaces” and “Shareware Tab Interaces”
PS. Great articles!
Eglence (April 26th, 2007, 6:58 pm)
Himm Very excellent list. I used some tabs ;)
Thanks for share
Agus Suhartono (May 2nd, 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.
Vaughn (June 20th, 2007, 8:31 am)
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.
williams (July 17th, 2007, 1:56 pm)
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!
Isaiah (September 17th, 2007, 2:40 pm)
The only problem with tabbed interfaces are still the search engines crawling…
Most of the scripts aren’t friendly to search engines.
toon (September 21st, 2007, 5:06 pm)
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
TOON
tricker (December 3rd, 2007, 5:37 pm)
only u need to add … when user hit the button.. with the help of javascript.. just googled the problem…
Adriaan Nel (January 26th, 2008, 9:02 am)
This list is good, but it would be way better if you could list the advantages / disadvantages of each…
Cheers
Rahul Bose (January 28th, 2008, 3:20 am)
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
thanks
Yogi (February 13th, 2008, 6:45 am)
I’ve also wrote a list of free Ajax tab samples on my blog, you can read it at Link [www.geektips.net]