Please take a look below. Is it ok to have nested menus like the ones shown below? The main menu is Activity/Practice and Sub menu for Practice is Me/Everyone. Is this ok to do?

enter image description here

  • 1
    Not an answer, but important: It's hard to tell from that screenshot if Practice or Activity is selected; same with Me and Everyone. Consider changing how those buttons look, for instance by adding an inset shadow to the selected buttons.
    – Quelklef
    Aug 24, 2017 at 3:40
  • 1
    @Quelklef, it is the default look for segmented controls in iOS. While it may not be clear without the context, for users who use iOS, it should be clear, which is selected, because this look is consistent across apps. developer.apple.com/ios/human-interface-guidelines/ui-controls/…
    – exp
    Aug 24, 2017 at 6:14
  • On a sidenote, if you're out of the consistent environment (e.g., web, used on multiple platforms), it might be a problem. I like the solution here (adding a dot to the label): artlebedev.com/mosgortrans
    – exp
    Aug 24, 2017 at 6:16
  • @Quelklef and others Thanks for the awesome comments!
    – Sam Rao
    Aug 26, 2017 at 4:32

2 Answers 2


The screenshot you have shown implies that you two layers of filters to show data, first is Activity and Practice while other is Me and everyone. Since you are using nested tabs for displaying data, I assume that all the information you are showing is related. Because tabs are used for showing chunk data that is logically related, and it is liable for user to switch between the information very quickly. Only in such cases you should use tabs.

Check link for more usage guideline: https://www.nngroup.com/articles/tabs-used-right/

The data you are displaying is related logically, but the style you have used to display data is not right. Instead of using tabs for Me and everyone you can use, cards that will hold category name, and will expand and display data on user click. This will remove the hierarchical nesting which confuses user making it more user friendly. check image for reference.

enter image description here

Also the tab style you have used is quite confusing. Here user will get confuse as in which tab currently he is. That style is valid if you have at least 3 or more tabs. Because then the user will see one tab different from other two or more tabs and it will give him a clear idea where he is currently. In this case you can show the non active tab in black, white and grey as I have shown. This will indicate clearly where the user is.

Also using cards is best solution as you can add more cards in a single tab in future without complexing the UI to more deeper level.


I think it's fine, but consider using a different UI / style for the sub menu. It is a bit confusing having the same control at different levels.

Maybe have the sub menu be part of the listing, by giving it the same grey background.

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.