3

Background

I am designing a tree structure that should represent folder nesting and contain some properties inside. On the left side of the screen, I have a tree structure with folders and on the right, I display the table with properties. enter image description here The problem

In our case, it is very likely that some of the folders are going to be very deep (The screenshot is a very edge case which we still have to keep in mind). I had an idea of a resizable tree area to a certain point but for now we don't have the opportunity to add "drag" function.

Also, because we're already using the breadcrumbs and tabs on the screen, in my opinion having second elements like this might be not very clear.

Question

Is there any other way to organize/show this deep tree structure? Maybe there are some products where I could see that deep of a structure (but not Windows/OS because they're using the whole content area)?

Improve this question

2 Answers 2

Reset to default
2

The most common solution for this problem is to use Miller columns. They take a lot of space, but they're clear and used for extremely deep hierarchy trees.

However, in your case you mention that you don't want to take a lot of space. So I'd still go with Miller columns, just that in their mobile implementation (even on desktop). See below:

enter image description here

and you can see the implementation code here

Note: this question already exists and has an answer, but it's extremely old and I doubt it's still useful, but you can check it just in case.

Improve this answer
2
  • Yes, I considered Millers Columns at first but the problem is that we have to see the table because it contains properties that might have "value" and "description" in them. Unless I somehow represent this data in the Millers Columns...It seems like it is a great variant for something like what you have in the screenshots, some items that are self-contained (pictures, docs, etc, something that doesn't have to have its specs in view). But I'll think about it, thank you for your suggestion Commented Oct 10, 2023 at 20:51
  • that's why I said to use the mobile version, but in desktop. Check the link I porvide for implementation: each panel overrides the previous one Commented Oct 10, 2023 at 22:42
0

As long as you need navigation on all levels (i.e. you can't hide top level menus as you open lower level menus), then I recommend adding lines to visually show the structure. Reddit does this with comments that can go on pretty deep. enter image description here

No matter how deep the comments get, you can use the lines on the left to signify how deep the file is and what level it is in. Visual studio code also uses something similar for their file management.

Edit: I'd also add a feature to expand/collapse the file management so you can expand it when you need to browse through different files and then minimize/collapse it when you need to focus on what's in the table

Improve this answer

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.