1

enter image description here

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?

Improve this question
4
  • 3
    Possible duplicate of Alternative to excessive number of tabs and multi-line tab rows
    – ecc
    Commented Oct 10, 2017 at 7:43
  • 2
    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
    Commented Oct 10, 2017 at 8: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
    Commented Oct 10, 2017 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
    Commented Oct 24, 2017 at 7:44

2 Answers 2

Reset to default
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.

Improve this answer
5
  • I wanted the horizontal navigation.
    – NB4
    Commented Oct 10, 2017 at 9:40
  • 2
    @NB4 Could you tell us the reason why you need an horizontal navigation? Lack of space? Visual consistency?
    – Stefano
    Commented Oct 10, 2017 at 11:20
  • Visual Consistency!
    – NB4
    Commented Oct 10, 2017 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
    Commented Oct 11, 2017 at 9:32
  • @ShreyasTripathy what if such pattern comes into the picture? How will it solve the above-said problem?
    – NB4
    Commented Oct 11, 2017 at 13:12
2

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.

Improve this answer

Your Answer

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

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