∴ 30 days of #DesignSystem • Yellow ∴ Day 16 ∴
Dropdown Menu is a component for displaying the list of options and their nested items.
The width of the dropdown can be defined in several ways:
1. The width of the dropdown can be defined by the maximum width of the trigger.
2. The width of the dropdown can be defined by the longest item in the list.
List with search input
If the list includes a search input, it should automatically receive focus when the user opens the dropdown.
As the user enters a value into the input, only the items that match the input should remain in the list. Don’t highlight these items in this case.
Menu Placement
By default the dropdown menu is aligned to the bottom left of the dropdown button when opened. Alternate placements are available depending on the needs of the design and are shown below. Additionally, the menu can be set to automatically adjust position to avoid being truncated by the browser or container edge.
It is recommended that the dropdown list with search should have a maximum height of seven items. If there are more items, the dropdown will have a scroll and a fader for the next item.
You can find Design System • Yellow file in Figma here 👉 https://www.figma.com/community/file/1312130033201614801/design-system-yellow
I would love to hear your feedback.
Please share your thoughts with me.
