Background
When the Menu displayed from any trigger element (e.g., Select, Combobox, MenuButton) contains a scroll, there are some aspects to consider for improving its experience:
- Since the scrollbar appears when start scrolling, it may not be immediately clear that the menu is scrollable.
- The current behavior keeps the scroll position when the Menu is closed and reopened.
User stories
- As a user, I need a clear indication that a Menu is scrollable so I can see that there are additional hidden options available.
- As a user, I need the Menu to always open starting from the first available option.
Possible solutions
Indicate that the menu is scrollable
- Op.1: We could display half of the last menu item. This visual cue would indicate that there are more items to scroll through.
- Op.2: Ensure that the scrollbar is always visible inside a menu if there is overflow.
- Op.3: Include a subtle opacity gradient to blur things at the top/bottom edge (similar to the solution in the Tabs with scroll)
Scroll behavior when the Menu is closed and reopen
- Solution: The scroll position should reset each time the Menu is closed.
Design spec
Once a component spec sheet has been created in Figma, remove the note stating that the spec is missing and link to the spec below.
| Component spec sheet |
Guidelines
Once the component Guidelines have been created, remove the note and link to the Guidelines.
| Component Guidelines |
Open questions
Add here the questions to be answered in order to design and implement the component
Acceptance criteria (or Done)
Design
- Explore possible solutions to make clearer the scroll within the Menu
- Evaluate these proposals with the DST and decide on the best approach
- Design the Figma spec sheet and add it in this task (if needed)
- Update the component in the Figma library. This step will be done by a DST member. (if needed)
- Update the component's Guidelines (if needed)
Code
- Update the component in Codex (if needed)