Context: The user must navigate through a tree structure and select any one item from it's contents (including its parents)

I find myself coming up against this situation often. I have a component that requires two actions of the user. In this instance, the user needs to be able to expand all the parents and children AND be able to select(or highlight) them.

enter image description here

I am struggling to find any good examples of this so I thought i'd put it out to the community to see if there is anything I could do.

2 Answers 2


Having a checkbox list should meet the requirements. This is a common pattern and should be easy to implement. Clicking on the container expands or collapses the node, while the checkbox is used for selection.

enter image description here


The "Navigation Pane" in Windows explorer seems a reasonable example of what you are trying to achieve. It looks almost exactly like your example screenshot, albeit with the arrowheads on the left instead of on the right. Click the arrowhead to expand/collapse, and the text next to it to select.

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.