Overview

The Menu is a composable element meant to be used specifically and only in combination with the menu-button. Together with the menu-button it becomes a strict opinionated widget that provides Accessibility compliance with WCAG dictated enumerated patterns.

It's important to understand that the following document dos not describe "a generic fly-out", but is instead meant to describe the predetermined Accessibility compliant "menu and menu-button" widget. If a generic fly-out is required use an alternative component.

---

Design

Box Model

Menu Button

• Please refer to the Button 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 (CBCFD7)
  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. Correct spacing is instead ensured through atomic composition of the out-of-the-box composed elements. In case authors hosts custom content, authors are in charge of ensuring consistent styling, which will follow standard Dim Sum spacing values.
• Min-Height: 32 RT
  When a menu exists, it MUST have at least one item, and by design follow the minimum sizing for an interactive element action menu item. This ensures for accessibility compliant minimum region size requirements while maintaining a visually pleasing size.
• Min-Width: Stretches to fit content
  The width stretches over the minimum size to fit the content as best possible.
• Max-Height: 256px
  When the max-height is reached the menu component itself is designed to add it's own scrollbar out of the box. This can be altered by authors in specific scenarios.
• Max-Width: 300px
  The max-width is designed to cover most use cases. This can be altered by authors in specific scenarios, but 200% resize and reflow MUST be considered. If the Menu with Submenu is used, a 'per screen size' MUST be used to ensure the fly-out is able to fit and labels can wrap when the max-width is reached.

Responsive

The Menu is designed with a responsive box model that by default has a defined max height and width to accommodate most use cases. This provides a baseline for content scalability accounting for resize and reflow to ensure a consistent and accessible user experience.

When the maximum height is reached the menu component is designed to incorporate a scrollbar to keep the menu content 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.

Menu structure should be consistent across screen sizes. Menu items should appear always in the same order and with the same wording and destination.

States

Use Cases

Examples

Digital Accessibility

The Menu by design is accessible and is a standard HTML component and therefore uses the familiar role=menu Please refer to the documentation for complete details for Keyboard Interaction and ARIA roles and properties.

---

Variants

Variants are not applicable to this component.

Composables

The menu-button widget simplifies interactions with predefined, accessible menu items, each serving a specific role.

Skeleton

The Menu uses the Skeleton 'S1' loading pattern for rendering fidelity.

Activation Item

Simple, direct actions without hierarchy or selection behavior that triggers a change in the page content.

Activation with Submenu Item

Introduces hierarchy, requiring logical and semantic parent-child relationships to avoid confusion.

Single Activation and Multi Activation

Handle altering page content dynamically while also tracking selections so far, when activating a specific menu item can't logically happen continuously.

Single

Multi

Single Activation Item with Submenu and Multi Activation Item with Submenu

These MUST be used sparingly due to their potential to violate WCAG standards and include strict embedded limitations on behaviors to prevent such violations.

Ensuring clear grouping, hierarchy, and appropriate use of items guarantees an accessible and user-friendly experience.

Single

Multi

Group

Ensures exclusive selection within a set of items and must wrap single select items and can also be used, sparingly, to provide a label for a group of menu items within the same menu or submenu level.

Separator

Divides section content within a group of items. It's delicate horizontal border offers sufficient contrast to delineate it as a distinct element.

---

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 Button: Menu Button is an action component consisting of a button that opens a menu.

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

The menu-button widget is purposefully designed to facilitate interactions that lead to a partial page reload, where only a specific section of the page content is updated without affecting the entire page. It is not intended for managing full-page navigations.

This widget is ideal for scenarios where the user's selection triggers changes within a defined area of the interface, ensuring a seamless and efficient user experience.

Implementing the menu-button widget in such cases would contradict its intended purpose and could lead to usability issues or confusion.

Additionally, this widget is not designed to function as a form field for user selections. Using it in this context would violate its scope and could result in non-compliant or suboptimal user experiences.

In summary, the menu-button widget should be utilized exclusively in contexts where it supports partial content updates within a page, ensuring both ease of use and compliance with accessibility standards.

These categories align with HTML semantics and are designed to ensure accessibility and consistency within the role='menu' structure.

---

Terminology

• Partial Navigation: Updates part of the page content without a full page reload. Includes altering filters, sorting, triggering a dialog, toggling the visibility of a section.
• Hierarchy: Describes parent-child relationships in menus with submenus, requiring logical design to avoid confusion.

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.
• 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.
• Data Table: Use when multiple columns of information are needed for the user to select or act.
• Grid: Use when quick and easy grid-based layouts are needed to ensure cross-browser support.
• Shuttle: Use a shuttle if the user selecting items and they are in a hierarchy or are heterogeneous.

---

Reference

• Usage Guidelines
• WCAG Menu Pattern
• Resize and Reflow Guidance
• View code on Storybook