Intro

This guideline now covers both SAPUI5 and SAP Web Components. Learn more.

Information

Icon

false

Intro

The menu is a UI component used to display a list of actions. Actions can be grouped in submenus.

A standard menu showing different items – New File, New Folder (grayed out), Open, and Close.

Component availability

The menu component is available in the following libraries:

<div> <div data-valign="middle">Library</div> <div data-valign="middle">Technical Name</div> <div data-valign="middle">Identifier</div> </div> <div> <div data-valign="middle">SAPUI5 Demo Kit</div> <div><a href="https%3A%2F%2Fui5.sap.com%2F%23%2Fentity%2Fsap.m.Menu">sap.m.Menu</a></div> <div data-valign="middle">:badge, info, large, _, SAPUI5:</div> </div> <div> <div data-valign="middle">SAP Web Components</div> <div data-valign="middle"><a href="https%3A%2F%2Fui5.github.io%2Fwebcomponents%2Fcomponents%2FMenu%2F">ui5-menu</a></div> <div data-valign="middle">:badge, info, large, _, SAP Web Components:</div> </div> <div> <div data-valign="middle">SAP Web UI Kit (Figma)</div> <div data-valign="middle"><a href="https%3A%2F%2Fwww.figma.com%2Fdesign%2FSILcWzK5uFghKun9jx6D7c%2FSAP-Web-UI-Kit%3Fnode-id%3D405890-22788%26t%3DC8SOXk2BS9qKWM1t-4">Menu</a></div> <div data-valign="middle">:badge, info, large, _, Figma:</div> </div>

<div> <div data-valign="middle">Library</div> <div data-valign="middle">Technical Name</div> <div data-valign="middle">Identifier</div> </div> <div> <div data-valign="middle">SAPUI5 Demo Kit</div> <div><a href="https%3A%2F%2Fui5.sap.com%2F%23%2Fentity%2Fsap.m.Menu">sap.m.Menu</a></div> <div data-valign="middle">:badge, info, large, _, SAPUI5:</div> </div> <div> <div data-valign="middle">SAP Web Components</div> <div data-valign="middle"><a href="https%3A%2F%2Fui5.github.io%2Fwebcomponents%2Fcomponents%2FMenu%2F">ui5-menu</a></div> <div data-valign="middle">:badge, info, large, _, SAP Web Components:</div> </div> <div> <div data-valign="middle">SAP Fiori for Web UI Kit (Figma)</div> <div data-valign="middle"><a href="https%3A%2F%2Fwww.figma.com%2Fcommunity%2Ffile%2F1494295794601744471">Menu</a></div> <div data-valign="middle">:badge, info, large, _, Figma:</div> </div>

When to Use

false

Use the menu to:

Display more than one action.
Keep the user in the current context.
Display only a small number of actions.

dont

false

Don’t use the menu to:

Provide only one option. Use a button instead.
Provide a primary default action with additional secondary actions – use a split button instead.

toptip

Use a limited number of menu items to maintain clarity and support quick scanning.
Use single-level navigation or add submenus for nested levels. Keep nesting minimal to avoid complexity.
Use single- or multiple-selection patterns based on the interaction requirement.
When incorporating icons in menu list items, maintain consistent spacing across all to ensure proper alignment and improve readability.
Use separators to group-related actions. Avoid excessive use to maintain scannability.
Display tooltips for menu items when text is truncated or when additional clarification is required.

Anatomy

Menu: Container shown as an overlay.
Menu Item: List item that represents an action.
Separator (optional): Horizontal line that groups the menu items.

Menu anatomy with numbered pointers: 1. Container, 2. Menu item, 3. Separator.

Menu anatomy

Icon (optional): Indicates the action triggered by the menu item.
Text: Describes the action that is triggered by the menu item. The text is mandatory.
Additional text, icon, or both (optional): Displayed at the end of the menu item to indicate a keyboard shortcut or a checkmark for selection.
Navigation indicator: Indicates that a submenu is available for the menu item.

The menu item adapts automatically based on the included elements.

Menu item anatomy showing icon (1), text (2), additional text (3), and navigation indicator (4).

Menu item anatomy

Types

The standard menu supports a single level of navigation. Use it for a simple list of actions without additional hierarchy.

A simple standard menu with text-only items: Add Pin, Share Images, Share Location, Export Map.

Standard menu without icons, navigation elements, or shortcuts

A menu with submenus supports nested navigation, allowing related actions to be grouped without overcrowding a single level. Submenus help organize the menu items logically, but the number of levels should be limited to keep navigation clear and easy to use.

Menu with nested submenus with multiple levels of navigation.

Menu with submenus

A menu that uses icons alongside text labels enhances visual recognition and usability. When icons are included, ensure consistent spacing is maintained across all menu items to preserve alignment and improve readability.

Menu with icons displayed next to text labels Sort, Settings, Show Chart.

Menu with icons

A menu with shortcuts supports access to items using key combinations.

Menu with icons displayed to the left of the text labels Sort, Settings, Show Chart and keyboard shortcuts displayed to the right of the first two (Sort and Settings) - Ctrl+3 and Ctrl+.

Menu with shortcuts

When there is need to show which option or options are active within a group of related menu items, a menu with single- or multi-selection can be used.

A. Menus with single-select items allow users to select only one item at a time. Selecting a new item automatically deselects the previously selected one.
B. Menus with multi-select items allow users to select or deselect several items at a time.

Side-by-side examples of single-selection menu and multi-selection menu showing check marks on the first and third items.

Menu with single- (A) and multi-select (B) items

The menu component can be used as a context menu, providing similar behavior to a standard menu. Right-clicking opens the context menu with actions relevant to the selected item or focused area.

Context menu opened on a UI element showing available actions: Add Pin, Share Images, Share Location, Export Map.

Context menu

A menu item can include an icon, text, a shortcut, or a selection indicator.

The menu item supports displaying both a shortcut and a checkmark. If a navigation arrow is present, the shortcut and checkmark are not displayed.

A: Text only
B: Text and navigation indicator
C: Text and shortcut
D: Text and checkmark
E: Text, shortcut, and checkmark

All menu items options can be displayed with or without an icon.

Grid showing all menu item variants: text only, with navigation indicator, keyboard shortcut, checkmark, and combination of text, shortcut and checkmark, alongside another column of the same variants starting with an icon.

Menu item options

States

Component states

The menu item supports two component states: enabled and disabled.

A. Enabled: Displays the interactive state.
B. Disabled: Displays a non-interactive state.

Menu items in enabled (regular) and disabled (grayed out) states.

Component states

For more information, see Component States.

Interaction states

The menu item has three interaction states: regular, hover, and down.

A. Enabled: Displays the default state.
B. Hover: Displays the hover state when the cursor is over an enabled menu item.
C. Down: Displays the down state while the menu item is pressed.

Menu items showing regular, hover, and down (pressed) interaction states.

Interaction states

For more information, see Interaction States.

Focus state

The focus state indicates which element is focused. Keyboard and assistive technology users rely on the focus state to follow the interaction.

Focus state appears as an additional border around the menu item. Disabled menu items (B) can also receive focus.

Focused menu items in enabled and disabled states with visible focus border.

Focused menu item in enabled (A) and disabled (B) state

For more information, see Focus States.

Selection states

The menu has two types of selection states, depending on the menu item used: a navigation item or an item with a checkmark.

A. Unselected is the default state of the navigation menu item.
B. Selected indicates the menu item that triggered the submenu.
C. Selected hover displays the hover state for a selected item.

Selection states for navigation items (unselected, selected, selected hover).

Selection states of menu navigation item

A. Unselected is the default state of selectable menu item.
B. Selected indicates that the menu item with checkmark was selected.

Menu items showing unselected and selected (checkmark) states.

Selection states of menu item without and with a checkmark

For more information, see Selection States.

Behavior and Interaction

A: Hovering applies hover and focus states.
B: Hovering over an item with a navigation indicator applies selected hover and focus states, and opens the submenu.

Two step sequence showing hover (A) and submenu (B) opening behavior.

Level navigation

C: Hovering over an item with a navigation indicator from the submenu applies selected hover and focus states, and opens the second submenu.

Nested navigation menus showing a second submenu opened when the user hovers over Menu Item 3.2, applying selected, hover, and focus states.

Navigation with second submenu

Mouse interaction

Users can open a menu by selecting a calling element (for example, a menu button) or by triggering a context menu. In both cases, the menu item automatically receives focus when the menu opens.

Opening a menu

Two-step sequence showing a context menu opening after the user clicks inside a content area, displaying the options Paste, Paste Special, Paste as Plain Text, and Paste as Hyperlink.

Opening a context menu

The menu closes after selecting an item, clicking outside the menu, or interacting with the calling element. This behavior also applies to the context menu.

Closing a menu with triggering an action

Closing a menu without triggering an action

Touch interaction

On touch devices, the behavior matches mouse interaction without the hover state. Users can interact via tap and long tap gestures.

When tapping the calling element, the menu opens and focus state automatically sets to the first menu item.

Opening a menu

Long tapping the calling element opens the context menu. Focus moves to the first menu item.

Long-tap gesture opening a context menu.

Opening a context menu

For more information, see Gestures.

Tooltips

Provide a tooltip when the menu item text is truncated or requires clarification.

Truncated menu item with a tooltip

For more information, see Using Tooltips.

Responsiveness

The menu width adjusts to its content.

Menus adjusting width based on content length.

Menu with different widths depending on the menu items’ length

The menu supports cozy and compact content densities.

A: Compact content density minimizes control dimensions to display additional information within the interface, optimizing usability for mouse and keyboard interactions.
B: Cozy content density offers expanded control dimensions designed for intuitive fingertip interaction, ensuring optimal usability on touch-enabled devices.

Side-by-side four item menus shown in compact and cozy menu densities.

Menu with compact (A) and cozy (B) content densities

For more information, see Content Density.

On mobile devices, the menu opens in full-screen mode to enhance usability. This layout allows the application to display a menu title, giving users clean context. To close the menu, users can tap the Cancel button in the footer.

Full-screen mobile menu with title and Cancel button in the footer.

Menu on mobile device

Accessibility

SAP follows international standards, such as WCAG and WAI-ARIA, and strives to make our business solutions accessible and inclusive.

For more information, see Accessibility in SAP Fiori and the Accessibility Design Tools Handbook.

The following keyboard combinations are supported by the menu component.

<div> <div>Key Combination</div> <div>What it Does</div> </div> <div> <div><strong>Space</strong> or <strong>Enter</strong></div> <div>If the consuming control has the focus, opens the menu. Focus is then set to the first menu item in the list.<br>If focus is on an item with no sub menu, triggers the corresponding action. If the focus is on an item with submenu, toggles the expand state of the current menu item. Does not trigger any action, keeps focus on the current menu item.</div> </div> <div> <div><strong>F10</strong></div> <div>Accesses application-based main menus.</div> </div> <div> <div><strong>Shift + F10</strong></div> <div>Accesses context menus.</div> </div> <div> <div><strong>Alt + Down Arrow</strong> or<br><strong>Alt + Up Arrow</strong> or <strong>F4</strong></div> <div>Opens the menu if the consuming control has the focus.</div> </div> <div> <div><strong>Left Arrow</strong></div> <div>If the menu has only one level, moves focus one item up.<br>If the menu has more than one level, moves focus to the last focused item of the previous menu level.</div> </div> <div> <div><strong>Right Arrow</strong></div> <div>If the menu has only one level, move focus one item down.<br>If the current focused item has a sub menu, opens the sub menu and moves focus to the first item of this sub menu.</div> </div> <div> <div><strong>Home</strong></div> <div>Move focus to the first enabled item within the same menu level.</div> </div> <div> <div><strong>End</strong></div> <div>Move focus to the last enabled item within the same menu level.</div> </div> <div> <div><strong>Shift + Enter</strong> or<br><strong>Shift + Space</strong></div> <div>Triggers the action, but the menu remains open.</div> </div> <div> <div><strong>Shift</strong></div> <div>On pressed Space/Enter, additionally pressing Shift/Esc releases the menu without triggering the associated action.</div> </div> <div> <div><strong>Esc</strong></div> <div>If focus is on the first-level menu, the menu closes without triggering a menu item. If the focus is on any other level, the corresponding level is closed and the focus is moved one level up.</div> </div>

For additional details on screen reader support and Accessible Rich Internet Applications (ARIA), see UI5 Screen Reader Support and WAI-ARIA-Authoring.

Content

Wrapping and truncation

Display the full menu item text when possible. To accommodate this, the menu width can expand up to a predefined maximum. If space is limited, the text may be truncated. Menu items do not support text wrapping.

Menu with three items, including a long truncated label in the second menu item.