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.

https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=6548%3A11923

Resources

TNL Use case example - LMS
Figma design file

Best Practices

Do use any button style as a trigger. Note the trailing dropdown caret icon is also visible

https://www.figma.com/file/dJr5ixCRKlXiuA4BsKxAk3/Design-System-Workspace?node-id=2348%3A14700

Caution using a standalone link style as a trigger. This should be used sparingly.

https://www.figma.com/file/dJr5ixCRKlXiuA4BsKxAk3/Design-System-Workspace?node-id=2348%3A15059

Don't use inline paragraph links to activate the menu

https://www.figma.com/file/dJr5ixCRKlXiuA4BsKxAk3/Design-System-Workspace?node-id=2348%3A15095

Don't use the styling from the button to restyle the menu.

https://www.figma.com/file/dJr5ixCRKlXiuA4BsKxAk3/Design-System-Workspace?node-id=2348%3A14630

Related Components

Behaviors

Expand top-down
Menu expands from the top down when the menu trigger is positioned within 150px of the top of the page.

https://www.figma.com/file/dJr5ixCRKlXiuA4BsKxAk3/Design-System-Workspace?node-id=2348%3A12365

Expand bottom-up
Menu expands from the bottom up when the menu is positioned within 150px of the bottom of the page.

https://www.figma.com/file/dJr5ixCRKlXiuA4BsKxAk3/Design-System-Workspace?node-id=2348%3A13535

Minimum and maximum width and height
Maximum width is 450px. Maximum height is 267px, equivalent to the approximate height of five and a half stacked menu items.

Long text automatically truncates with an ellipses.

Width should only become narrower if the viewport becomes narrower than the menu.

https://www.figma.com/file/dJr5ixCRKlXiuA4BsKxAk3/Design-System-Workspace?node-id=2348%3A11916

Scrollable
When there are 6 or more items, the menu container becomes scrollable.

https://www.figma.com/file/dJr5ixCRKlXiuA4BsKxAk3/Design-System-Workspace?node-id=2348%3A12182

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