Tabbed Widgets in Web Design: UI Examples & Free Plugins
Certain layouts work really well with tabs. You can show/hide content on the page like Q&A sections or to load dynamic content via Ajax.
The trouble is adding tabs into a page that work well and are easy to setup.
If you’re looking to add custom tabs into your design this article will help. I’ve curated a bunch of live examples along with free plugins to help you setup a killer interface with tabbed widgets.
Tabbed UI Design Ideas
Let’s start by looking at some practical examples just to show what you can do with tabs.
These examples are all hosted on CodePen so you can actually edit, fork, and clone these for your own projects.
First up is a snippet developed by one of the co-founders of CodePen, Chris Coyier.
This shows how you can design tabs that actually look like tabs and blend nicely into the page.
It’s one design trend I always recommend to people who want to create multi-tabbed widgets. Make sure the selected tab blends naturally into the rest of the page background.
In this example you’ll notice the selected tab’s background is all white and it doesn’t have a top border. That’s the kind of blending you should be going for.
Likewise this snippet follows a similar design, but with a focus on content underneath the tab.
Whenever you select a tab the text automatically becomes bold and the tab appears “on top” of the others.
This signifies a visual hierarchy which is a big deal in UI/UX design. It’s something I definitely recommend for larger tab widgets.
You could also raise the height of the tab while increasing any label sizes for font weight. For example, this snippet doesn’t use labels but it does increase the tab’s height along with its position alongside the other tabs.
I’m also really liking the color choices here.
They grab attention and blend pretty well into the layout. Even though it’s just a demo I’d say it’s a usable example that could run on a real website.
Now there is one other style you might try which is vertical oriented tabs. These are situated alongside the left or right side of a widget and they work exactly the same way, just designed a little differently.
This example from CodePen features a handy CSS reference interface with vertical tabs.
It uses very little jQuery which makes it ideal for non-JS coders. But to get this working in your own page you’d have to make quite a few changes to the design.
If you’re adamantly against JS for tabs you could try pure CSS solutions also. There are plenty out there and these are four are great examples:
Still you have more control if you go with JS-powered tabs. This is why I often cover tabs with a scripting angle and recommend JS-powered tab plugins.
And before we get into the free plugins I want to cover one more design topic: responsive web design.
If you can design your tabs to be fully responsive then you’ve got one usable widget that can run on any device. Take for example this snippet created by Andy Fitzsimon.
It features a beautiful dashboard UI and the entire thing is fully responsive. Just resize your browser window to see how it works.
Smartphone users would have a sliding menu instead of a tabbed widget but the behavior is very similar. And it’s the best way to handle tabs on smaller screens.
All of these demos offer guidelines on how to structure tabs for your own site, but remember they are only guidelines.
You can always test different UI/UX techniques that would benefit your audience and see how they work in different layouts.
Free Tab UI Plugins
To get you started with building tabs I’ve listed some of my favorite plugins here.
These are all totally free and open sourced on GitHub so you can use them for any project you like. These offer a much easier way of creating tabs rather than coding from scratch, not to mention there’s plenty of variety to go around.
The SmartTab plugin is built on jQuery and super easy to use. This is also one of the best choices for custom UI styles to match any website.
You can find screenshots on the main page and there’s also a demo page you can check out too.
Here’s another super flexible jQuery plugin called Easy Tabs. It’s built to be lightweight and easy to use with any framework or stylesheet, it just requires a bit more styling to look good.
Have a peek at the main page for a demo along with code snippets and a direct download link.
One thing I like about Tabbed Content is that you can run this on top of jQuery or Zepto. It’s easily the best plugin for variety and customization.
It’s pretty bland as a default style but a great choice for developers.
They blend nicely into the minimalist style and they behave exactly like you’d expect for tabbed elements. By far the coolest feature I’ve seen.
On a similar topic if you’re a big React developer then check out these React.js tabs. It’s a really simple plugin to add into your frontend and it’s fully compliant with typical React syntax.
Accessibility on the web is quickly becoming the norm for web design. And that’s why I highly recommend these tabs for WAI-focused designers.
You can dig through their site to learn more but it’s just so hard to read.
Rest assured this accessible plugin is compliant with the WAI-ARIA specs so you’re offering the most accessible tabs to your visitors.
Tab UI Inspiration
Looking for even more ideas to help you design awesome tabs?
Well, I made this brief UI gallery to inspire all designers working on tabbed widgets for mobile apps or websites. These designs feature a variety of styles with vertical & horizontal tabs, minimalist designs, icons, pretty much everything.
Take a look over these mockups and see if you can gather some neat ideas for your own tabbed widgets.
I hope this post can offer some snippets, design ideas, and free plugins to get you started building your own tabbed widgets.
It can take a while to design tabs that fit your site perfectly. But if you follow these techniques you’ll have a much cleaner layout with a radically improved experience for the end user.