What should be the universal height of a dropdown list component in a design system?

Question

I'm building a dropdown list menu component in a design system that will be used by many designers and teams, so I need a universal max height.

I understand that the max height of a dropdown list menu component in the most optimal environment would vary for each and every context, but I don't have that luxury.

I've also come to learn from reading on UX Stack Exchange that for an unstyled browser out-of-the-box dropdown list that each browser has its own max height by number of items (e.g. Firefox shows 20 items in the menu, then scrollbar for any after that).

Our design system will have custom visual style for the dropdown list menu appearance, so I'm also wondering if I can still leverage the browser's default menu height even though we're customizing.

Answer 1

I agree with @Danielillo, keep your list from going below the viewable screen.

I do have one small addition. I don't know how you are building out your design system, but when creating the component as part of a design, use a device frame if possible, this way it communicates the intensions in @Danielillo's answer.

Now, depending on how your design tool works, this might be tricky to achieve, you might need to separate the items in the dropdown from their frame and have whoever does the designs for a screen, layout the items accordingly. But it's just something small to avoid back and forth with the developers.

Answer 2

If the question talks about a universal max height, I assume that it refers to a significant number of contained elements. I don't think there's a universal maximum, but there is some element to consider at a practical level.

In responsive components, the maximum visible height of the screen should set the limit, avoiding exceeding it. For example, using this same page as an example, the filter in the upper right corner, in Chrome > Samsung Galaxy 8S preview, hides the buttons, these being important elements in the UX. In my opinion, this should not happen:

In the rest of the screen previews, the items appear in two columns.

If I were to define a maximum height for a dropdown, I would calculate a maximum height from the preview on the device with the lowest screen width/height and use this height for all devices and desktop.