On a web tool that I'm working on, I need to allow the user to navigate through a flat list of data and create a tree out of it. The user is a backend admin who is trained to use the tool.


I have a list of data. Say,

  • Demographic_Men
  • Demographic_Male
  • Demographic_Women
  • Demographic_Female

The user needs to create a tree out of this list as follows: enter image description here
Where Male comprises of Male and Men and Female comprises of Women and Female.

The solution

The solution that I have come up with for the problem is as follows

enter image description here
This allows the user to add and create a root and then add children to it. These children are then mapped to Demographic_Men, Demographic_Male... etc accordingly.

The problem
The problem with this approach is that it doesn't scale well in the case of several nested children. Currently trees with just 2 nested children are displayed using accordions. Is there a design pattern for this or some similar problem?
Sorry if the question is confusing. I'm basically trying to create and map trees out of a list of data.

I have had this several times in my designs, and some of the solutions can be;

  • based on maximum number of levels, you calculate and just indent childrens with some padding from left, and limit width to i.e. 150px.. Some childrens with longer titles will then have text in two rows, which when styled good is not a problem

  • you place full names to childrens, but limit number of characters.. and with "..." in the end.. then you can on mouseover just in tooltip place full name for the children

  • place very small indent / margin for left.. you can place very small indent / margin from left for each level a little bit higher.. and mark sublevels with colors (i.e. every sublevel under, has a bit shader of grey for background)

Otherwise, if you just need classic tree view with lot of levels and you cant use above fixes, you could thinking of changing general layout to get more space for it.

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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