Guidance on multiple tabs on a page

[vanesng]

Hi there, I was wondering if there is any guidance on having multiple tabs on a page. We have this scenario where there are two sets of tabs on the page, and it feels like there is a lot going on. I was thinking that making the first set of tabs full width, and the second set of tabs not have a horizontal divider may give some hierarchy. However, I wanted to see if there are other tab treatments or ideas you may have.

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Sorry, I don't know how to help with that.

I did do a search though, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• responsive tabs and maximum number of tabs (updated: 09/26/2023, similarity score: 87%)
• What is the best way to use Tabs in a container that is too small and causes overflow (updated: 11/08/2023, similarity score: 86%)
• responsive tabs and maximum number of tabs - Answer (updated: 09/26/2023, similarity score: 86%)

[roxanagomez]

Hi @vanesng thank you for sharing your work with us. I have a few questions about the tab structure:

1. What is the relationship between the secondary tabs? From the titles, it seems like these might be steps the user has to take. Are they sequential?
2. Will all the primary tabs contain secondary tabs? If so, will there always be two, or might there be more?
3. Which set of tabs has more probabilities to expand (in number) primary or secondary?
4. How important is it to maintain the visibility of secondary tabs at once, versus potentially hiding some content behind perhaps a different component?
5. Will any of the tab items (primary or secondary) modify the URL?

[vanesng]

Hi @roxanagomez,

1. The primary tab always has to be filled out. The context on the secondary tab is an advanced feature that is optional (we clearly indicate that to the user once they click on it). The content on the primary tab affects the secondary tab (we have accounted for this in the implementation). They may not be done sequentially - we anticipate users switching between both.
2. Not all the primary tabs will contain secondary tabs. This is the only page which has secondary tabs for now. Perhaps in the future, under settings, we will have secondary tabs. But I think it would be fine to use vertical tabs for that scenario since we aren't as constrained on horizontal space.
3. We may add 1 more tab in the future, but haven't decided if it will go as an additional tab at the primary or secondary level.
4. Could you elaborate on what different component you're thinking here? I may be able to comment if I understand better. But we chose the tab approach because we wanted it to be easy for advanced users to discover the feature, and switch between the two areas. The conditions on each secondary tab can also be very long so having the full screen width and height would be ideal.
5. The primary tabs modify the path of the URL (/overview, /edit/, /settings). The secondary tabs do not modify the URL.

Thanks for all your thoughtful questions! Let me know if you need more information.

[roxanagomez]

Thank you for your answers @vanesng

The primary tabs modify the path of the URL (/overview, /edit/, /settings).

Since the primary tabs modify the URL I would recommend to use In Page Navigation to reflect URL changes.

The primary tab always has to be filled out (...) The content on the primary tab affects the secondary tab (...) The context on the secondary tab is an advanced feature that is optional

Since the relationship between "select profiles" and "refine relationships" is dependent, and "refine relationships" is an advanced feature, I believe tabs are not the best component for this scenario. Tabs give both tasks similar hierarchy, but "refine relationships" is an optional/advanced feature that may not be used by everyone, so it might not require such a high hierarchal priority.

In this example in Figma , I tried a version using Disclosures to layout both tasks. This approach organizes the page with a clearer hierarchy, emphasizing the primary task while providing access to the advanced feature. The users can also toggle back and forth if necessary.

Outside from this specific example we don't recommend having multiple sets of tabs on one page as it can be difficult for navigation and way-finding, but if there no other options, a mix between vertical and horizontal tabs can help balance the composition and improve navigation clarity (I included this recommendation in the Figma file above)

If you would like to discuss this further in a session feel free to take a slot in one of our Office Hours. We will continue to monitor this discussion too if you'd rather have it async here.