Menu usage guidelines

Menus provide compact lists of options that allow users to take an action or navigate to another part of the UI.

When to use

• Use to allow users to take actions from a list of options.
• Use when space prevents multiple buttons or actions from being displayed together or when you have a list of 4 or more options.
• Use to allow users to take action on or transform tables, cards, or other data.

When not to use

• When there are 3 or fewer options, consider using radio buttons, checkboxes, buttons, or toggles where relevant.
• For primary or critical actions where visibility is necessary. For this, either use more visible components like buttons and radio buttons, or use buttons for the primary action and a menu for all secondary or tertiary actions.

Usage

Preview

Menu

Code

import { Button, Menu, MenuItem, MenuRoot } from '@cimpress-ui/react';
import { IconChevronDown } from '@cimpress-ui/react/icons';

export default function Demo() {
  return (
    <MenuRoot>
      <Button iconEnd={<IconChevronDown />}>Menu</Button>
      <Menu>
        <MenuItem>Option 1</MenuItem>
        <MenuItem>Option 2</MenuItem>
        <MenuItem>Option 3</MenuItem>
      </Menu>
    </MenuRoot>
  );
}

A common way to display a menu is with a button that includes a text label and a down chevron icon. The button serves as a trigger that opens the menu when pressed.

Icon-only trigger

Preview

Code

import { IconButton, Menu, MenuItem, MenuRoot } from '@cimpress-ui/react';
import { IconMenuMoreVertical } from '@cimpress-ui/react/icons';

export default function Demo() {
  return (
    <MenuRoot>
      <IconButton icon={<IconMenuMoreVertical />} aria-label="Menu" />
      <Menu>
        <MenuItem>Option 1</MenuItem>
        <MenuItem>Option 2</MenuItem>
        <MenuItem>Option 3</MenuItem>
      </Menu>
    </MenuRoot>
  );
}

Icon buttons can be used in cases where space is limited or where the context makes the menu’s purpose clear (after another, related primary action for example). When using an icon button trigger, make sure the icon clearly communicates the menu’s purpose.

With sections

Menu sections are headings that can be used to categorize the items in a menu if there’s a large number of options or if the added context helps users understand or differentiate menu items. menu section text should be short, distinct, and clearly label the category of menu items.

Preview

Menu

Code

import { Button, Menu, MenuItem, MenuRoot, MenuSection } from '@cimpress-ui/react';
import { IconChevronDown } from '@cimpress-ui/react/icons';

export default function Demo() {
  return (
    <MenuRoot>
      <Button iconEnd={<IconChevronDown />}>Menu</Button>
      <Menu>
        <MenuSection title="Section 1">
          <MenuItem>Option 1</MenuItem>
          <MenuItem>Option 2</MenuItem>
        </MenuSection>
        <MenuSection title="Section 2">
          <MenuItem>Option 3</MenuItem>
          <MenuItem>Option 4</MenuItem>
        </MenuSection>
      </Menu>
    </MenuRoot>
  );
}

With dividers

Menu dividers add visual distinctions between menu items. They should be used extremely sparingly and only when it is important to visually separate one or two items from the rest of the list. They are commonly used before the last item in the list when that item is more important, destructive, or significantly different from the other options (delete, for example).

Preview

Menu

Code

import { Button, Divider, Menu, MenuItem, MenuRoot } from '@cimpress-ui/react';
import { IconChevronDown } from '@cimpress-ui/react/icons';

export default function Demo() {
  return (
    <MenuRoot>
      <Button iconEnd={<IconChevronDown />}>Menu</Button>
      <Menu>
        <MenuItem>Option 1</MenuItem>
        <MenuItem>Option 2</MenuItem>
        <MenuItem>Option 3</MenuItem>
        <Divider />
        <MenuItem>Option 4</MenuItem>
        <MenuItem>Option 5</MenuItem>
      </Menu>
    </MenuRoot>
  );
}

With descriptions

Item descriptions can be added to provide more context for items in a menu. Descriptions should be used consistently in a menu and should only be used in menus with a small number of options. Be careful not to overwhelm the user with too much text in a small list.

Preview

Menu

Code

import { Button, Menu, MenuItem, MenuRoot } from '@cimpress-ui/react';
import { IconChevronDown } from '@cimpress-ui/react/icons';

export default function Demo() {
  return (
    <MenuRoot>
      <Button iconEnd={<IconChevronDown />}>Menu</Button>
      <Menu>
        <MenuItem description="Description 1">Option 1</MenuItem>
        <MenuItem description="Description 2">Option 2</MenuItem>
        <MenuItem description="Description 3">Option 3</MenuItem>
      </Menu>
    </MenuRoot>
  );
}

With icons

Icons can be used with menu items to differentiate them and provide additional context to users. Icons should be used consistently across menus and should clearly represent the menu item. Icons should be used infrequently in menus and only where they add value.

Preview

Menu

Code

import { Button, Menu, MenuItem, MenuRoot } from '@cimpress-ui/react';
import { IconAdd, IconChevronDown } from '@cimpress-ui/react/icons';

export default function Demo() {
  return (
    <MenuRoot>
      <Button iconEnd={<IconChevronDown />}>Menu</Button>
      <Menu>
        <MenuItem icon={<IconAdd />}>Option 1</MenuItem>
        <MenuItem icon={<IconAdd />}>Option 2</MenuItem>
        <MenuItem icon={<IconAdd />}>Option 3</MenuItem>
      </Menu>
    </MenuRoot>
  );
}

Formatting and layout

Placement

Menus can be either right-aligned or left-aligned with any related components or containers. Unlike the form components, menus should not ever span the full width of the container. Their width should instead always be determined by the length of the text label.

Spacing

• Menus have 16px of spacing between them and any related component (related buttons, for example).
• Menus have at least 24px of spacing between them and any unrelated components or sections of the UI.

Button alignment

Menus can be grouped with buttons when there are 4 or more actions being grouped together. Button should be used for the primary or most-used action and any secondary actions should be put in the menu.

Buttons and menus should be grouped horizontally in a row with 16px spacing between them. The menu should always be the right-most component in the group.

Do

EditMore

Don't

EditCopyMoveArchive

Up to two buttons can be grouped with a menu. Button groups should never have more than one menu.

Do

EditDeleteMore

Don't

EditDeleteCopyMoveMore

Don't

EditCopy and movePublish

Content writing

Label

• Do use a short description of just one or two words for the label such as “Attribute”.
• Do use descriptive language that makes it clear what actions the user will find in the menu.
• Do not format labels in the form of a question such as “What action would you like to take?”
• Do not include verbs in your label such as “Select an action”.

List items

• List items should be ordered intentionally to make finding an option easier for users. They can be organized from most selected to least selected or alphabetically.
• Section headings should be short and clearly state how the section has been categorized.