Menu component

About this component

The Menu component supports both default and custom menu item options. Designers and developers can use our accessible, out-of-the-box menu items or tailor custom menus to meet specific clinical needs. When customizing, we recommend using other design system components where possible to maintain consistency and ensure accessibility and responsiveness across clinical applications.

Guidance

Menus help reduce clutter and provide users with access to additional actions or filters without overwhelming the interface. Use them to present contextual, non-primary, or overflow actions — especially when space is limited or when the actions are only relevant in certain situations.

When to Use

Use a menu when you need to:

• Present a list of mutually exclusive actions or filters.
• Provide overflow actions in a compact format.
• Display a list of navigation or selection options related to a parent element.

When to consider alternatives
Avoid using a menu if:

• You need persistent, always-visible navigation (consider tabs or sub-navigation).
• You need to present complex, multi-line content or actions (consider a modal or drawer).
• The action requires confirmation before execution (consider a dialog).

Menu item count: Menus should contain a minimum of 2 items. A single-item menu adds unnecessary interaction cost and may indicate that the action should be presented directly as a button.

Do not exceed 7 items per menu whenever possible. Cognitive research suggests that comprehension and recognition decline with larger sets, especially under time pressure.

If more than 7 items are needed:

• Re-evaluate the information architecture — consider whether the actions belong in the same context or could be reorganized across different menus.
• Split actions into multiple menus that are more contextual.
• Use clear menu labels or trigger button text to help users understand the grouping.

Menu items options

Default menu items

Our design system provides a set of default menu item styles that are accessible, consistent, and performant across clinical environments.
Available by default:

• Text-only items: Single-line labels, suitable for most action or filter use cases.
• Icon + text items: Add context for common actions (e.g., Edit, Delete) while supporting reduced cognitive load.
• Accessibility baked-in:
  • Keyboard navigable using [Tab] to support custom menus
  • Roles and ARIA attributes are applied automatically.
  • Visual focus styles are provided.
• Use default items when:
  • You want to follow system conventions and ensure fast implementation.
  • You don’t need additional structure or custom logic per item.

Custom menu items Custom menu items allow greater flexibility for clinical applications with unique needs—such as embedded indicators, additional metadata, or grouped content.
You may customize:

• Additional functionality
• Content layout (e.g., secondary text, shortcut keys).
• Interactivity (e.g., checkboxes for multi-select behavior).
• Grouping (e.g., headings or separators between logical sections).
  Guidelines:
• Maintain consistent spacing and alignment.
• Ensure visual and keyboard focus remains clear.
• Use semantic HTML and ARIA roles where applicable.
• Avoid custom tabIndex values. Let the system manage tab order unless explicitly required.
  Use custom items when:
• You need non-standard layouts or interactions.
• You are surfacing structured clinical information (e.g., patient status, timestamps) within a menu.

Menu items variants (For designers)

The Menu component supports the following item-level variants to meet a range of interface needs across clinical applications:

1. Standard
A text-only option, commonly used for simple actions or navigation.
2. Icon + text (Leading icon) Includes an icon to the left of the label for added context. Best used when the icon reinforces the meaning of the action.
3. Trailing icon (Action)
Displays an icon on the right side of the menu item to indicate a direct item-level action (e.g., edit, delete).

Design guidance for trailing icons:

• Use design system icons that clearly communicate the available action.
• The entire item (including icon) should remain a single focusable target.
• Maintain alignment and spacing between the label and trailing icon using spacing tokens.
• This variant is useful when menu items trigger specific, recognizable functions per row.

Designer note:
In the Figma UI Kit, the Menu Item is built as a single master component with all variants available through the properties panel. This allows designers to easily switch between Standard, Leading Icon, and Trailing Icon variants without needing to swap individual components.

Examples of menu item variants

Standard
Leading icon
Trailing icon (Action)

Accessibility

The menu has been designed and built with accessibility best practices already in place. This includes support for keyboard navigation, visible focus indicators, appropriate color contrast, and robust labeling to ensure it can be used effectively by all clinicians, including those relying on assistive technologies.