3

What is the recommended height of a dropdown menu that has an internal scrollbar on desktop?

I have a dropdown menu that when opened could contain 30 - 50 items to choose from. It's for desktop. I want to accommodate users with 1024 by 768px screen but I also don't think it will look good with a dropdown list that runs the length of the page and then scrolls. I was thinking of setting a max height for the dropdown and then using internal (nested) scroll bars to view the list. See below for example

enter image description here

I know the pros to showing full length means easier visibility of more options to select from but if 80% of time users are selecting the first 16 options is it the best option to display as much content as possible. If I was to go fixed length on the height is there a recommended height it should be (e.g. in pixels or by number of selections? Or are there guidlines to follow ofr recommended height (in pixels) for desktop dropdowns that have an internal scroller?

Below is an example of fixed with with dummy content.

enter image description here

1

In your case make the dropdown occupy as much as you need (full-height with some margin below) so more options are visible without the need to scroll.

A Material design example on scrollable menus:

enter image description here

More general thoughts:

  • Does the user need the context to make the selection? If the user would want to check some information while seeing the dropdown options, then don't make the dropdown hide that context information.
  • Is the selection of the dropdown independent of what is on the page? In this case probably using the dropdown as big as you need might be a good idea, because the user is focusing on this task.

I'm assuming this dropdown is opening on click and closing when an option is selected. So in my opinion the height of the dropdown is more case dependant than a general rule.

  • Does the user need the context to make the selection? No, it's a focused task. Is the selection of the dropdown independent of what is on the page? Yes, it's for navigating to another page. – Neil O'Donoghue Jan 10 '17 at 16:47

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.