I'm looking for an effective way to organise navigation items where some items are closely related to another in the same list.

This is how they're currently listed:


Teams are made up of Users, and Groups are made up of Products. Note: other links not shown here do not have this type of relationship.

I'm having trouble with the quasi parent-child relationship between items. I don't want to group them together too strongly (e.g. make Users a child item of Teams) as the administrator needs to be able to manage them separately.



These are few enough elements to be ordered inline on the same row (level), possibly like this:


download bmml source – Wireframes created with Balsamiq Mockups

Home and logo navigates to the start page. Then we group Products and Group together with more whitespace surrounding these elements. The same goes for Users and Teams who also are grouped together and having whitespace surrounding them.

This technique is called Grouping which is a part of the Gestalt Principles. In this particular case, having elements closer to each other is called Proximity:

The principle of proximity states that, all else being equal, perception tends to group stimuli that are close together as part of the same object, and stimuli that are far apart as two separate objects.


good question. I am having same type of confusion like (Tax & Tax Group).

My suggestion is, you can have:

  • Home
  • Users
  • Products

If you go to "Users" list you can have two type of sub navigation/filter like

  • All Users
  • Teams

If you allow to enter the "team name" you can have separate screen for team creation otherwise you can specify some team name like tags @ the user creation screen.

Otherwise you can go with vice versa.

use the above scenario for (Products/Groups)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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