Navigational Select Menu
documentation complete Design complete waiting for qa
This menu component is used to trigger an action based on the user’s selection.
Contributors
@Gabriel Weinberg @Ange Romanska (Deactivated) @Adam Butterworth (Deactivated)
Related Jira Tickets
https://openedx.atlassian.net/browse/UXTL-3
https://openedx.atlassian.net/browse/PAR-456
Default Component
The default menu component is triggered on the click of a button or standalone link, and expands from the center. The menu uses a modified tertiary button (left-aligned text and minimum width) and all of its states, with a white background, and level 2 elevation. The menu also remembers the user’s selection and displays it as the label for the button trigger.
NOTE: Any button or standalone link style can be used as a trigger, not just the secondary button in the example below.
Resources
TNL Use case example - LMS
Best Practices
Do use any button style as a trigger. Note the trailing dropdown caret icon is also visible
|
Caution using a standalone link style as a trigger. This should be used sparingly.
|
Don't use inline paragraph links to activate the menu
|
|
Related Components
Behaviors
Expand top-down |
|
Expand bottom-up |
|
Minimum and maximum width and height Long text automatically truncates with an ellipses. Width should only become narrower if the viewport becomes narrower than the menu. |
|
Scrollable |
|
Accessibility
Focus Management Expectations | When the menu is activated, it pulls focus into the list, to the current selection in the list. When activated, the screen reader should tell the user what the menu does (ie. “Select a course section.”). When focused on a the selected menu item within the list, screen reader should say “Current selection [selected item] |
Semantics |
|