UI pattern for adding option to a tree select box



  • 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 🙂



  • 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



Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2