0

Issue: When creating a dropdown menu for options, I came across a question from the developers about how it should respond. Should it have a fixed width, or expand with the content? We will have data with varying length appearing as menu items, some of it could be very long, so it should probably not grow infinitely, however I don't want too much wrapping in the dropdown menu either.

Question: What is the best practice for the width of dropdown menus (single menu items not nav), growing with their content or a fixed width? Should we set a min and a max width?

Small menu items Longer menu items

1 Answer 1

1

When having data with varying length, trying to adapt the menu width to its length will cause you to have to review all the possible contents to see which is the longest and see if it does not exceed the page width, something you can do with current contents but not with unknown content, for example if the website is multi-language.

This will generate drawbacks at the design level since you will have an infinity of unpredictable widths in a simple navigation menu.

I think the best option is a submenu with a fixed width, but there are design alternatives.

Multi Column Dropdown Menus

Set a fixed width and split the menu dropdown in to multiple columns to avoid the menu items extend outside of the browser window.

enter image description here

enter image description here

Image from joomla51.com



1
  • Thank you so much for the detailed answer, this is really helpful!
    – Zimukaus
    Commented Nov 5, 2021 at 14:20

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.