Button element

An OptionMenu must have a button element to trigger it. Typically, a Button component is used with ButtonDecorator.Dropdown to render the ChevronDown icon. Any element can be used here, but when using a custom element make sure it is a button html element for accessibility, otherwise the focus management handled by OptionMenu will run into problems.

Editable example
<OptionMenu button={<Button decorator={ButtonDecorator.Dropdown}>Options</Button>}>
  <OptionMenuItem>Option 1</OptionMenuItem>
  <OptionMenuItem>Option 2</OptionMenuItem>
  <OptionMenuItem>Option 3</OptionMenuItem>
</OptionMenu>
<OptionMenu button={<Button decorator={ButtonDecorator.Dropdown}>Options</Button>}>
  <OptionMenuItem>Option 1</OptionMenuItem>
  <OptionMenuItem>Option 2</OptionMenuItem>
  <OptionMenuItem>Option 3</OptionMenuItem>
</OptionMenu>

Best practices

1. Avoid using an OptionMenu if the number of options is two or less. A better component to use in that case is a SegmentedControl.
2. Avoid mixing and matching selectable OptionMenuItems with non-selectable OptionMenuItems.
3. Use a succinct label of 1—3 words for the trigger button and avoid long or complex words.

Sizes

The size prop determines the width of the OptionMenu menu popover element. Generally use the medium size, but small can be used for more compact layouts, while large is useful to prevent longer OptionMenuItems from spanning multiple lines.

Editable example
<OptionMenu size="small" button={<Button type={ButtonType.Secondary} decorator={ButtonDecorator.Dropdown}>Small</Button>}>
  <OptionMenuItem>Option 1</OptionMenuItem>
  <OptionMenuItem>Option 2</OptionMenuItem>
  <OptionMenuItem>Option 3</OptionMenuItem>
</OptionMenu>

<OptionMenu size="medium" button={<Button type={ButtonType.Secondary} decorator={ButtonDecorator.Dropdown}>Medium</Button>}>
  <OptionMenuItem>Option 1</OptionMenuItem>
  <OptionMenuItem>Option 2</OptionMenuItem>
  <OptionMenuItem>Option 3</OptionMenuItem>
</OptionMenu>

<OptionMenu size="large" button={<Button type={ButtonType.Secondary} decorator={ButtonDecorator.Dropdown}>Large</Button>}>
  <OptionMenuItem>Option 1</OptionMenuItem>
  <OptionMenuItem>Option 2</OptionMenuItem>
  <OptionMenuItem>Option 3</OptionMenuItem>
</OptionMenu>
<OptionMenu size="small" button={<Button type={ButtonType.Secondary} decorator={ButtonDecorator.Dropdown}>Small</Button>}>
  <OptionMenuItem>Option 1</OptionMenuItem>
  <OptionMenuItem>Option 2</OptionMenuItem>
  <OptionMenuItem>Option 3</OptionMenuItem>
</OptionMenu>

<OptionMenu size="medium" button={<Button type={ButtonType.Secondary} decorator={ButtonDecorator.Dropdown}>Medium</Button>}>
  <OptionMenuItem>Option 1</OptionMenuItem>
  <OptionMenuItem>Option 2</OptionMenuItem>
  <OptionMenuItem>Option 3</OptionMenuItem>
</OptionMenu>

<OptionMenu size="large" button={<Button type={ButtonType.Secondary} decorator={ButtonDecorator.Dropdown}>Large</Button>}>
  <OptionMenuItem>Option 1</OptionMenuItem>
  <OptionMenuItem>Option 2</OptionMenuItem>
  <OptionMenuItem>Option 3</OptionMenuItem>
</OptionMenu>

Separator

Use the OptionMenuSeparator to separate menu items that fall into different logical groups, or to separate destructive actions from other options. OptionMenuSeparator is a simple wrapper around the Separator component with some default spacing applied to sit correctly within an OptionMenu.

Editable example
<OptionMenu button={<Button decorator={ButtonDecorator.Dropdown}>Options</Button>}>
  <OptionMenuItem>Option 1</OptionMenuItem>
  <OptionMenuItem>Option 2</OptionMenuItem>
  <OptionMenuItem>Option 3</OptionMenuItem>
  <OptionMenuSeparator />
  <OptionMenuItem destructive>Destructive action</OptionMenuItem>
</OptionMenu>
<OptionMenu button={<Button decorator={ButtonDecorator.Dropdown}>Options</Button>}>
  <OptionMenuItem>Option 1</OptionMenuItem>
  <OptionMenuItem>Option 2</OptionMenuItem>
  <OptionMenuItem>Option 3</OptionMenuItem>
  <OptionMenuSeparator />
  <OptionMenuItem destructive>Destructive action</OptionMenuItem>
</OptionMenu>

Accessibility

By default, OptionMenu takes care of all the accessibility for you. You only need to be careful if you take over control of its state. By default, pressing the Esc key, blurring the menu, and clicking outside closes the menu. You will need to implement this behavior yourself if you take control of its state using the isOpen prop.