v1.0.0
Overview
Menu is an action component that offers a choice of one or more options from a list of at least one interact-able item. The menu is opened, or made visible, by activating a menu button, and may include a menu button (that opens a submenu), labels, headers, separators and activation identifiers.
Design
Box Model
Menu Button
- Please refer to the Button Component Specification for complete details.
Menu
- Box-shadow "s"
The Menu's container is styled with a drop shadow and always appears in front of other content. - Border 1px solid neutral-300
The fine border marks the Menu's perimeter, providing enough contrast to define the Dropdown Menu as a primary entity while keeping the design clean and unobtrusive. - Border radius: 1px
The Menu's rounded edges make the interface appear softer and more inviting, providing an intuitive, user-friendly and accessible interface. - Background: neutral-000 (#FFFFFF)
The Menu background has a neutral color fill to provide sufficient contrast with the foreground content for proper presentation. - Margin/padding
The Menu does not come with pre-set spacing values in order to optimize the flexibility of content layout. UX will provide exact guidance on a case-by-case basis to ensure consistent styling, which will follow standard Dim Sum spacing values. - Min-width 32px and Min-height 32px
These dimensions guarantee that the Menu remains functional and aesthetically pleasing across different devices and screen sizes, adhering to the principles of responsive design. - Stretches to fit content
The Menu expands to fit the content, ensuring that the design adapts to content volume while maintaining the dropdown menu's visual integrity.
Responsive
The Menu component is designed with a responsive box model that adapts to varying screen sizes and contexts to ensure a consistent and accessible user experience. The minimum dimensions provide a baseline for content scalability, while the absence of margins and padding allows for flexible integration within different layout environments.
It is also important to provide scrolling to keep the menu usable on smaller screens, and in long drop downs, to prevent them from overflowing off the screen. Another important thing is defining breakpoints where the dropdown menu layout changes, ensuring optimal usability on devices ranging from mobile phones to desktops.
The Menu structure should be consistent across screen sizes. List items should appear always in the same order and with the same wording and destination.
States
| State | Graphic | Default Styling |
|---|---|---|
| Idle |  | background: neutral-000 (#FFFFFF) |
| Focus |  | [vs standard idle] background: brand-200 (#EBF6FF) border: 1px solid brand-500 (#1394E5) |
| Disabled |  | [vs standard idle] cursor: disabled |
| Read-only | N/A (no required cases) | N/A |
| Hover |  | [vs standard idle] background: brand-200 (#EBF6FF) |
| Error | N/A (no required cases) | N/A |
Use Cases
| Original Scenario (Use Case) | Dim Sum Version (Proposed Solution with DS Components) |
|---|---|
 |  |
 |  |
 |  |
 |  |
 |  |
 |  |
 |  |
Examples
| Scenario Graphic | Scenario Solution | Text Resize and Reflow (200%) | Scenario Description |
|---|---|---|---|
 |  |  | Activation a 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 with left decoration Icon a basic menu configured with a left decoration icon for better understanding of various actions to be taken. |
 |  |  | Single Activation a 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 a 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 with Submenu provides 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. |
| Examples In progress | Single Activation with Submenu a composable that is a pre-composed and orchestrated component that unifies the semantics and behaviors of "single selection" composable and "submenu" composable | ||
| Examples In progress | Multi Activation with Submenu a composable that is a pre-composed and orchestrated component that unifies the semantics and behaviors of "multi selection" composable and "submenu" composable | ||
| Examples In progress | Group Label for presentational purpose only and has no action. It is to be placed at the top of a menu group to distinguish section content. | ||
| Examples In progress | Separator for presentational purpose only and has no action. It's delicate horizontal border offers sufficient contrast to delineate it as a distinct element, and is to be placed within the menu to distinguish section content. |
Digital Accessibility
Menu is a standard HTML component and therefore uses the familiar role=menu Please refer to the documentation for complete details.
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:
Component 1: Add description.
Component 2: Add description.
Component 3: Add description.
By leveraging these atomic components, 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
- Shuttle: Use a shuttle if the user selecting items and they are in a hierarchy or are heterogeneous.
- Card v3: Use Card when a set of related pieces of content need to be easily assessed for individual or bulk action. Card typically summarizes key information from the full detail view of its corresponding content, such as an input form, service order results, or report. The summary helps the user compare each Card in the set and prioritize next actions, such as completing missing inputs or selections, or resolving errors.
- Grid: Use when quick and easy grid-based layouts are needed to ensure cross-browser support.
- Data Table: Use when multiple columns of information are needed for the user to select or act.