1

Is there any comment or best practice to use the below case

I have a vertical tab of material design used in desktop version of a website portal. It is a Resposive web and when the viewport size is reduced for mobile devices the same tabs are made as horizontal tabs.

Any ideas on if this can be implemented and is a good way to use? or Any ways to improvise this case?

Please note: this is a patch that is asked for and not a design phase problem that should have been taken care of.

Ref Images:

Verical tabs in desktop version of site Verical Tabs

Horizontal tabs horizontal tabs

1
  • The solution depends on how many items you can end up with. If it's less than 5, you could potentially use a vertical tab component. If it's going to be more than that, you'll have to look at a more versatile solution. Do you know how many items you'll get in total? May 26, 2020 at 7:56

1 Answer 1

2

Generally I‘d avoid tabs for most things because they hide content and are generally harder to use than just laying out the content in plain site.

That said, if the content of each tab can be clearly labelled and the first tab (the one that starts open) is more relevant than the others, and users don't need to see all the contents of all tabs at the same time then they can work.

I would always suggest they are presented horizontally. Vertical tabs are unnecessary and unconventional.

If you have a lot of tabs, then you could use an accordion instead. And you could switch to an accordion on small screens.

But if an accordion works well on small screens, I‘d look to keep it consistent across all screen sizes and go with an accordion for large screens too.

4
  • 3
    Adam, I'm honestly curious to learn more about your comment that "vertical tabs are unnecessary and unconventional." If I look at typical SaaS applications, you will find such vertical tabs for main navigation in many contexts. or take Slack or, in fact, StackExchange, where, again, a sidebar with vertical tabs provides key navigation functionality. What is your PoV based on? (I'm not being snarky here, but looking for insights. ;) ).
    – JochenW
    May 27, 2020 at 1:47
  • @Adam Silver do you like to add to JochenW because it totally makes sense for me to see the vertical tabs right here in StachExchange UI too. Any thoughts? May 27, 2020 at 2:18
  • @AshwinKulkarni ah I think of the StackExchange thing as side navigation as opposed to tabs. When I think of Tabs, I think they change the content immediately, without a page refresh (inclusive-components.design/tabbed-interfaces) So what I was referring to was tab behaviour and I think you might have been referring to tab styling. May 27, 2020 at 6:52

Not the answer you're looking for? Browse other questions tagged or ask your own question.