A menu is a disclosure component that appears with a set of actions relevant to a specific control, interface area, data element, or application view. It is a list of interactive options that appears when users interact with an element or perform a specific action. Context is typically determined by the user's current selection prior to invoking the menu.

Menu use case: declutter interface

Use menus to hide less frequently used or advanced options until users specifically need them. This keeps the interface clean and focused on essential elements.

Menu use case: context menu

Context menus are triggered by a right-click interaction. A context menu is a defined list of options in a menu that appears above all other content on a page and is related to the selected content or element it was triggered from.

Menu use case: customizable actions for advanced users

Menus can speed up interactions for advanced users who are already familiar with the application. These users often rely on shortcuts and context-specific actions to work more efficiently.

Menu pitfall: form submission

When submitting a form with a static list of options for users to choose from, or when filtering, use a dropdown instead of a menu.

Menu pitfall: complex inputs

When many or complex inputs are used collectively, use a popover instead of a menu.

Menu anatomy elements

Menu anatomy includes: Trigger (elements that display a list of available actions, including menu buttons, combo buttons, and overflow menus); Action item (a menu item that can be activated to apply its action, possibly accompanied by submenu indicator or keyboard shortcuts); Divider (a rule indicating different sections); Submenu indicator (a caret icon indicating a submenu); Keyboard shortcut (certain action items may display keyboard shortcuts); Menu (a container displaying the open state and containing actions); Selected item (an item that can be single or multi-selected); and Submenu (a nested level off the primary level).

Menu item sizes and heights

Menu items come in four sizes: extra small (24px / 1.5rem), small (32px / 2rem), medium (40px / 2.5rem), and large (48px / 3rem). When using a menu button trigger, the height of the menu item reflects the size of the button being used. Carbon does not currently support the extra-small size for buttons, only for rows or menu items, so this menu size cannot be utilized with menu button triggers.

Menu sizing rule: match button and menu height

Match the height of menu buttons and the menu items. Do not mix the height of menu buttons and menu items.

Menu width: minimum and maximum

Menu maintains a minimum width of 160px to prevent a narrow appearance. If menu item labels become longer, the menu component can expand up to a maximum of 288px. If button labels become longer, the menu component should extend to match the width of the menu buttons.

Menu width rule: match button width when labels extend

When menu button or combo button labels become longer, the menu width should match the button width. Do not make the menu appear narrower than the menu buttons or combo buttons.

Menu width rule: fluid-width buttons

If you use fluid-width default buttons, both the menu button (or combo button) and the menu should have the same width.

Menu width rule: ghost button behavior

Ghost buttons only adhere to the button style. Do not enlarge the ghost button's width to match the menu's width, as this would result in the caret appearing disconnected from its associated button, especially when the menu button is in its closed state. Always use default ghost button, never use fluid ghost button.

Menu default alignment

By default, combo button, menu button, or overflow button remains positioned at the top, to the left or right side of the menu when it is open, depending on the available space and layout.

Menu alternative alignment

Alternatively, open menus can be positioned at the bottom, to the left or right of its associated menu button trigger, depending on the available space and layout.

Menu alignment rule: consistent action item alignment

Ensure consistent alignment when combining single or multi-select items with non-select items to improve the menu's readability. Do not create mixed alignments with unselected and selected items.

Menu right-to-left (RTL) behavior

For RTL (right-to-left) languages, the entire menu is mirrored horizontally, including the direction of the caret and keyboard shortcuts.

Menu content rule: label precision and truncation

Use short and precise labels for menu items. When deciding to truncate long menu items, a browser-rendered title tooltip will reveal the full text on hover.

Menu content rule: item ordering and grouping

Arrange menu items in a meaningful sequence that aligns with the order of operations. Place the most frequently used items at the top. When there is a significant amount of menu items, group them into sections separated by divider lines.

Menu content rule: number of items

With context menu and overflow menu, keep the list length manageable by including no more than 12 items to help users scan through items easily without scrolling. With menu buttons, keep the menu list smaller with under 5 items.

Menu submenu definition and guidance

A submenu is a menu item with the caret icon on the right, offering additional related commands. While submenus can help organize a context menu and make its options clearer, introducing multiple levels of submenus can make the user experience more complex and harder to navigate. Avoid multiple levels of nesting for submenus.

Menu submenu labeling rule: omit recurring terms

When a term appears in more than two menu items in the same group, consider eliminating the recurring term in the submenu label to help people predict its content and scan easily. Do not repeat the same term from the submenu trigger.

Menu item states

Menu items have seven states: enabled, hover, focus, focus and hover, danger hover, danger hover and focus, and disabled.

Menu item state: enabled

The enabled state is used when an action in the list is live but a user is not directly interacting with it. This is commonly referred to as the default or normal state of the component.

Menu item state: hover

The hover state is used when a user's mouse cursor is hovering over the menu item in menus or submenus.

Menu item state: focus

The focus state is used when a user tabs to or clicks on a menu trigger. This will open up the menu list. The first item in the menu list has the focus state as default.

Menu item state: focus and hover

The focus and hover state is used when an item is in the focus state but the user's mouse cursor is hovering over the item row.

Menu item state: danger hover

The danger hover state is used when an action could have destructive effects on the user's data, such as delete or remove.

Menu item state: danger hover and focus

The danger hover and focus state is used when a user tabs to a destructive menu item that has the danger hover state.

Menu item state: disabled

The disabled state is used when an action is not able to be performed at a certain time, but will be possible to be performed by that user at another point in time. Actions that are permissions-based should be hidden if it is never possible for a user to perform that action.

Menu mouse interactions

Once the menu opens by clicking on a menu button trigger or right-clicking on an area, users can: select or deselect an item by clicking on it, hover over the item with the caret icon to reveal additional options or actions from that item, and click outside of the menu area to close it.

Menu keyboard interactions

Once the menu opens by pressing Return or Enter on the menu trigger, users can: press Up and Down arrows to navigate between menu options, press Return or Enter or Right arrow on the item with the caret icon to reveal additional options, press Return or Enter on an item to select or deselect it, and press Escape to close it.

Menu responsive behavior: opening and selection

Once the menu opens, the first option is highlighted. Users can then move through the list of options to activate or select one item at a time. Once users activate or select a menu item, the menu closes.

Menu item activation outcomes

Activating a menu item can trigger: open a dialog box, set a value (which can perform an action or serve as a selected/deselected option in the menu), open a new page (typically in a new window or tab), initiate a new user task (potentially involving multiple steps), save or close something, expand a submenu (though this can also occur without activation), undo or redo a user action, perform various actions (e.g., editing actions like cut, paste, copy, format; application actions such as checking for updates), open a sidebar or toolbar, access an existing page, adjust the current window(s) (e.g., minimize, split, arrange, swap), or no action other than closing the menu.

Menu dividers purpose

Divider lines serve the purpose of categorizing related actions into appropriate sections, while also distinguishing actions that might have a significant impact on the user's data, such as deleting an app or service.

Menu keyboard shortcuts display

A menu item can display related values, like a caret indicator for accessing a submenu or a keyboard shortcut linked to the action.

Menu single-select and multi-select visual

Single-select or multi-select have the same visual with the checkmark in front of the menu item.

Menu danger state application

A danger hover state can be applied to actions that could cause significant changes, such as delete.

Give your agent this brain

menu

Menu definition and purpose