I have a UI with tree view which can have unlimited child. And every child will have about 12 buttons in each parent and child list view. Is there any way that this can looks good in terms of UI & UX. This is the problem.

  • I suggest to add the buttons in a separate container, in a new line - maybe bordered with a rounded box and the Basic:, Exclusive details, in line with each element title. Nov 10, 2016 at 5:45

2 Answers 2


Use Context Menu to Display the More Options

  1. Use More Options (3 dots vertical) to display the node specific actions on hover over (each node)
  2. Always display the context menu on right side (leave 10 px margin from right)
  3. Use ellipses for displaying length text. On hover over, show the browser tooltip to show the full text, but make sure the more options (3 vertical dots) are visible within the box (shouldn't be hidden)
  4. Reduce or group the context menu options. For instance, see the Merchant in attached image.
  5. Based on the available vertical space, display the context menu on top or bottom.

enter image description here


Too many options leads to confusion and increase the time in taking a decision I purpose:

Why don't you ask user about his action first and then ask where he want to perform that action. To iterate: Add new location should be a global button and once clicked, open a popup(or any UI element) for filling data and ask if the input is country or state or district/street name through dropdown.

You may also do the following things:

  1. Categorise the buttons in to actions like " Add/edit location, TAX details, Payment details etc

  2. Once the main button is clicked, show sub actions attached to parent action

  3. Differnciate the primary and secondary button with affordability.

Something like below image: enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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