I am working on a web app for ipad and the app has nested architecture. As you see in the image we have like 3 levels of nested tab. The level 1 header has items on right side which I haven't shown and also makes it busy.

enter image description here

I wanted to know if there are better ways to solve this. Thanks

2 Answers 2


Interactivity with tabs offers many possibilities, including swapping the labels for titles (and subtitles) when they are active, suppressing the rest of the tabs plus a return icon in each state when advancing to the following steps:

enter image description here


I've noted that when you have such deep nested hierarchies, most designs switch to a horizontal column system (let's call it that for now).

3 columns

Something like that.

You can also see this in Google Analytics:

Google analytics admin section

Firebase Firestore as well:

Firebase firestore data viewer

  • 1
    I like the idea and had similar thoughts. One think I forgot to add was this is for a iPad mini POS app ( 1133*768), thats why vertical layout was used to give more space to the final content.
    – Diego
    Commented Jul 26, 2023 at 15:54

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.