Overflowing tabs and sub tabs - [Desktop view]

Question

How do we solve multi-level navigation? In the current design, I have added arrows on both sides and at both levels as well. But this design looks odd.

Tab 1 to Tab 12 -- Primary tab
Tab 1-1 to Tab 1-12 -- Sub tabs of tab 1

Other option: Have a "More" element with the drop-down for primary tab and the secondary will have the arrow option.
The problem would be that I have 2 designs for the same tab. In addition to this, if the primary tab only has one option the drop-down menu wouldn't make sense.

Is there any solution available to solve this problem?

Possible duplicate of Alternative to excessive number of tabs and multi-line tab rows — ecc, Oct 10 '17 at 07:43
Not the same, this is a tab within a tab. The post you linked is concerned with showing so many tabs you end up with rows of tabs. — Wendy Wojenka, Oct 10 '17 at 08:27
I think giving people more context on your design would greatly improve the quality and usefulness of answers for you. Who is going to use this software and for what? — Big_Chair, Oct 10 '17 at 15:21
@Big_Chair This is basically a web app. It does contain a lot of tabs and subtabs within. I cannot prefer vertical navigation. As this is enterprise website with lots of data to display. — NB4, Oct 24 '17 at 07:44

score 3 · Answer 1 · answered Oct 10 '17 at 09:39

3

mockup

^{download bmml source – Wireframes created with Balsamiq Mockups}

I had the same problem of handling tabs inside tabs while I was working on a web app. The first solution, I thought of was to try making one section of tabs as topbar and the section that comes within as a sidebar.

answered Oct 10 '17 at 09:39

William Gilbert

131
8

I wanted the horizontal navigation. – NB4 Oct 10 '17 at 09:40
2

@NB4 Could you tell us the reason why you need an horizontal navigation? Lack of space? Visual consistency? – Stefano Oct 10 '17 at 11:20
Visual Consistency! – NB4 Oct 10 '17 at 13:20
@NB4 - Visual consistency could very well lead to visual chaos. I can barely make sense of the navigation even with your explanation. Imagine how lost a first time user would be – Shreyas Tripathy Oct 11 '17 at 09:32
@ShreyasTripathy what if such pattern comes into the picture? How will it solve the above-said problem? – NB4 Oct 11 '17 at 13:12

score 2 · Answer 2 · answered Oct 10 '17 at 08:53

Tabs within tabs are OK - as long as you use them within the right context. In your case, you seem to have a lot of tabs going on, probably way too many. I don't know what your design is for, but I highly recommend clustering if possible.

So, for your issue, I think you should use sidebar navigation. Set up your primary navigation in tabs as you currently have, and place your secondary navigation to the left of it. It will not physically resemble tabs, but it will function the same. Once your user selects a primary tab, they will get options to choose a secondary option and can freely alternate between these.

This thread here contains a lot of good discussions regarding tab within a tab use. Particularly this part:

Each level of tabs should visually differentiate themselves so its clear what level of organization you are working on.

Limit number of tabs. Infinite is bad. 5 is the max.

"ON" states should be extremely clear. Use a hot color to make sure its obvious. The user should know where they are at all times without any thinking. - Glen Lipka

Tabs within tabs are widely discouraged because it's heavily cluttering. If you're not dealing with a super complex information system, I'd suggest you look for alternatives and decrease (unnecessary) content.

Overflowing tabs and sub tabs - [Desktop view]

2 Answers2