Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:5Length:50 minutes
Ui design practical guide to tabs 400x277
  • Overview
  • Transcript

2.4 Working With Vertical Tabs

Welcome to the final lesson of this short course, where we’ll take a quick look at vertical tabs.

This UI pattern, while not as common as the horizontal one, is still found on the web and can sometimes be a good alternative.

So to wrap things up, let’s see what kind of changes we need in our markup and styling, and discuss when and where we should use vertical tabs.

Related Links

2.4 Working With Vertical Tabs

Welcome to the final lesson of this course where we''ll take a quick look at the vertical tabs. Although these are not as common as the horizontal ones, they can still be found on the web. And sometimes they can actually be a pretty good alternative. So in this lesson, you'll learn how to create vertical tabs and also when and where you should use them. Let's begin. We're back here in CodePen where I have the code for the very first set of tabs that we created. Now we're gonna go ahead and transform this horizontal tab control into a vertical tab control. To do that, we'll start with a markup, and instead of text, I'm going to be using icons inside of tabs. So let's go ahead and add font-awesome because we're gonna use some icons from there. For example, in here, I'm simply gonna create an i with a class of fas.fa-code. All right, and that adds this little icon here. And I'm also going to add a title to my link so that we get a nice indication of what that tab is all about. So I'll go ahead and repeat the same process for the other four tabs, right? So now, instead of text, we have icons in all the other tabs. The rest of the markup will stay exactly the same. Now, let's move over to the CSS and transform these from horizontal to vertical. To do that, well I'll go to .tabs and we'll say display: flex, all right? So that basically converts all of these elements into flex items, putting them side by side. Let's get rid of this margin for a ul. And for each list items that'll display inline-block, we're just gonna say display: block. So now, those horizontal tabs are transformed into vertical tabs. It's that simple. The JavaScript code remains exactly the same. All we did was change the styling a little bit. And finally what we can do is set text-align to center so that all of the icons are centered nicely in the tabs here. Now, when would you use vertical tabs? Because they're not as common. And our tendency is to read from right to left, so having tabs like this vertically might not always work. So vertical tabs work pretty well when you have a short text or icons like this. When you have a lot of tabs and you simply do not have the horizontal space, right, you can fit these nicely in here vertically. Or when you have limited horizontal space, because if I had resized this, even on small screens, they still have a lot of of room to display the content. But I would say 90% of the time, just go with horizontal tabs because that's what most users are accustomed with. And that's what makes sense to most. But if you want to use vertical tabs, this is one of the ways you can do it. All right, and that's it for this short course. Thank you very much for watching. Make sure you follow us on social media and stay tuned for more content like this. I'm Adi Purdila and until next time, take care.

Back to the top