v1.0.0
Overview
Menu Button is an action component consisting of a button that opens a menu.
Design
Box Model
Menu Button
Please refer to the Button Component Specification for complete details.
Responsive
Please refer to the Button Component Specification for complete details.
States
| State | Graphic | Default Styling |
|---|---|---|
| Idle | N/A (see button v3 specs for native states) | N/A |
| Focus | N/A (see button v3 specs for native states) | N/A |
| Disabled | N/A (see button v3 specs for native states) | N/A |
| Read-only | N/A (see button v3 specs for native states) | N/A |
| Hover | N/A (see button v3 specs for native states) | N/A |
| Error | N/A (see button v3 specs for native states) | N/A |
Use Cases
| Original Scenario (Use Case) | Dim Sum Version (Proposed Solution with DS Components) | Scenario Description |
|---|---|---|
 |  | Activation Menu Shown in a Toolbar located above a Data Table (using an overflow icon-only button) |
 |  | Activation Menu with Left Decorator Shown in a Page Header Toolbar (triggered from an overflow icon-only button) |
 |  | Single Activation Menu This is showing the Pills v2 component used with Menu Button component. These two components MUST be configured together to achieve this result. See Pills v2 Specs |
 |  | Multi Activation Menu This is showing the Pills v2 component used with Menu Button component. These two components MUST be configured together to achieve this result. See Pills v2 Specs |
 |  | Activation Menu with Group Label and Separator Shown with Group Label and Separator used in a Page Header Toolbar (triggered from a filled toggle button) |
 |   | Top: Navigation Menu with (Sub)Menu Shown in a Page Header. The current selection and default menu items are marked with a Secondary Label 'Current and Default'. Bottom: Activation Menu Shown moved out of the Navigation Menu, relocated to the Toolbar. This separates the two different semantic roles from co-mingling different functionalities. |
Examples
| Scenario Graphic | Scenario Solution | Text Resize and Reflow (200%) | Scenario Description |
|---|---|---|---|
 |  |  | Activation Menu menu consisting of menu items (labels) for taking immediate action on one or more items. When standard action occurs and no visual representation is needed. |
 |  |  | Activation Menu with Left Decorator menu configured with a left decoration icon for better understanding of various actions to be taken. |
 |  |  | Single Activation Menu menu item whose activation implies exclusive selection within the same selection group. The visual feedback to indicate the activation state is a circular dot. |
 |  |  | Multi Activation Menu menu item whose activation implies non-exclusive selection within the same selection group. The visual feedback to indicate the activation state is a single check mark. |
 |  |  | Activation Menu with (Sub)Menu menu with a right facing chevron serves the purpose of providing visual feedback about the presence of a (sub)menu spawning from the given "submenu" menu item. |
 |  |  | Single Activation Menu with (Sub)Menu menu pre-composed and orchestrated component that unifies the semantics and behaviors of "single selection" composable and "submenu" composable |
 |  |  | Multi Activation Menu with (Sub)Menu menu pre-composed and orchestrated component that unifies the semantics and behaviors of "multi selection" composable and "submenu" composable |
 |  |  | Menu with Group Label an element who's purpose is to delimit single selection within a group of items. It provides a label placed at the top of a group of menu items acting as a label for related items, helping to organize the menu structure. |
 |  |  | Menu with Separator an element who's purpose is to divide section content within a group of items. It's delicate horizontal border offers sufficient contrast to delineate it as a distinct element. It is purely presentational and has no action associated with it. |
Digital Accessibility
Menu Button is a standard HTML component and therefore uses the familiar role=button Please refer to the documentation for complete details.
Variants
Not applicable
Related Composition Components
This Component's flexibility and adaptability are enhanced when used in conjunction with other atomic components within the Dim Sum Design System. These related components may include:
Menu: is a composable element meant to be used specifically and only in combination with the menu-button.
By leveraging this atomic component, designers can create highly customized card layouts that cater to specific content needs while ensuring a consistent and cohesive user experience across the interface.
Usage Warnings
Objective: Address common errors or misunderstandings related to the component's use or implementation.
A component may have obvious potential to be used incorrectly by UX or product. It is possible there are common implementation pitfalls for app devs as well. List these below with complete references and rationale.
Pitfalls & Misconceptions
Highlighted content may go here if necessary.
Alternate Components
- Combo Box Use when there are many states or selectable items, one or more can be selected, and space is at a premium.