2

So there is a challenge, lets say we have a selection and sub-selection, when few items in sub-selection menu it looks great(image 1), but problem occurs when many ( image 2 )

I drafted solution in image 2, but I think its not good at all

Remark: - changing to vertical menu is not an option - scrolling sub-items is not a solution either

Image 1:

enter image description here

Image 2:

enter image description here

Improve this question
4
  • 1
    Best practices for tabs that exceed the viewport width is to make them scroll horizontally (it's also the easiest way to maintain and code). If you're against it and also against vertical tabs I think what you did in Image 2 is probably the only option left. It will be a nightmare to code it, though, but I can't think of any other option (well, in fact I can and I have seen it before but it looks horrible and it's too confusing: to have 2 rows of tabs)
    – Devin
    Sep 25 at 17:07
  • It's a good idea to avoid "tabs in tabs". Is there a reason why all of the sub-tabs need to be visible to the user? If so, the usual pattern is a vertical sub-menu on the right. Curious why that wouldn't be an option?
    – Izquierdo
    Sep 25 at 19:51
  • Thanks for an answer, but content of this "Lore ipsums" is usually a data table in 98% or cases across platform is section and subsection with very few options, but these 2% are like example provided above that drives me craze, another reason not to use left menu is that website already has left menu outside of this sections.
    – tkeija
    Sep 30 at 12:27
  • Another simple option to code can be to add a second row of sub-tabs when they don't fit in one row.
    – zubko
    Oct 1 at 7:30

2 Answers 2

Reset to default
4

The solution is a well-designed mega menu with subitems:

enter image description here

Source designmodo.com/create-css3-mega-menu

A real example is the Mailchimp > Resources megamenu with more than 20 submenus:

enter image description here

Improve this answer
1

This problem may appear even with fewer tabs but in smaller viewports. I think one option which you've shared is a good one. But instead of a dropdown, you can add scroll arrows that may appear on both left and right side of the tab-bar.

enter image description here

2nd option (similar to the one you shared) enter image description here enter image description here

Improve this answer
2
  • +1. first one is the way to go, but OP specifically said he doesn't want it. Second option is what he has, but it will create additional issues. Also, dropdowns should be used for content that can be grouped in some kind of logic, but if this is dynamic content, how will the system discern which link is more important and how to avoid hiding an important item while showing a less important item?
    – Devin
    Sep 25 at 23:12
  • Thanks for the comment, looks like ill have to stick to my own solution, will update if something new comes up.
    – tkeija
    Sep 30 at 12:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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