I do not like the nested 'tabs' although my requirment is to put the 3 tabs in the administration tab as it belongs there. I have also thought about a vertical schoolclasses/weightedtests/weightedsubjects tab button bar, but that would take away too much space which I need horizontally.

Does someone know a user friendly layout or component so I can better display this nested schoolclasses/weightedtests/weightedsubjects level? Because architecturally it is right to have those elements nested. I just would like to have it more flat/rearranged. Or is it just me that I think thats a nogo?

enter image description here

  • Elements inside reporting, for example, are not again schoolclasses/... , weighted tests, weighted subjects, right?
    – Alvaro
    Jan 3, 2017 at 11:07
  • Right. Inside reporting are other things like 2 charts about grades/marks also each chart in its own tab.
    – Pascal
    Jan 3, 2017 at 11:19
  • you should go for the solution given by @J. Dimeo. I am also suggesting you the same Jan 3, 2017 at 12:52
  • yes I liked his suggestion most as the display is very natural to my requirements.
    – Pascal
    Jan 3, 2017 at 12:59

2 Answers 2


What about a hierarchical or tree organization instead along the left side? Tree example

In your case, the top level elements would be "Admin", "Tests" and "Reporting".

  • Hm.. hm... yes I like it! This would be on the left side then. Why did I not think of that :P That way I embrace the hierarchical architectur of a component tree, what makes the impl. very easy and grateful!
    – Pascal
    Jan 3, 2017 at 11:40
  • Great! glad it was helpful. That screenshot was from a UI that I just switched to that layout myself.
    – J. Dimeo
    Jan 4, 2017 at 3:22

You could reduce the complexity by selecting the project in a different page (you can still put it inside a dropdown in the image below); including the second level under a different element such as a dropdown; the buttons as you have them right now look the same as tabs so give them a different styling; hide the editable section behind an Edit button.

enter image description here

  • how do you choose and then open a project? This is very unusual actually to put the tabs into a dropdown. Or is this just me? I use angular2 which is component orientend and putting the children(admin/tests/reporting) on the same ui level as project is what I wanted avoid as it needs technically seen much effort and I have already been there...
    – Pascal
    Jan 3, 2017 at 11:26

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.