I'm wondering if anybody has seen or knows of a good UI pattern for creating options for a select box with a tree-like structure.

This is the library I'm planning to use to display the actual structure: React Dropdown Tree Select, but I'm having a problem coming up with a good admin-side solution for actually creating options by the user.

Any tips appreciated, thanks :)

  • please post a screenshot to prevent link decay for future usefulness.
    – Mike M
    Nov 13, 2020 at 19:07

1 Answer 1


Let the user add an option to the menu, by defining the label (what the user sees) and value (what the system sees). Then, I think the most user-friendly pattern is to let them drag and drop the item into its appropriate place in the listing. In "edit mode", it doesn't have to be an actual dropdown menu. It might be a list of labels with drag handles.

Common CMS systems like Wordpress and Drupal have some good patterns in their Navigation Menu sections that you might look at for inspiration.

Wordpress Add Item To Menu demonstration

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.