Igloo branding


This component is used to display a menu which will contain a list of menu options. The menu is dismissible if you click outside the dropdown.


To install @igloo-ui/action-menu in your project, you will need to run the following command using npm:

npm install @igloo-ui/action-menu

If you prefer Yarn, use the following command instead:

yarn add @igloo-ui/action-menu


Then to use the component in your code just import it!

import ActionMenu from '@igloo-ui/action-menu';
import Button from '@igloo-ui/button';

      label: 'Add Item',
      value: 'add',
      label: 'Delete Item',
      value: 'delete',
      disabled: true,
      label: 'Copy Item',
      value: 'copy',
  renderReference={(refProps) => {
    return (
      <Button appearance="secondary" {...refProps}>


classNamestringAdd a specific class to the action menu
closeOnSelectboolean | ((option: OptionType) => boolean)Whether or not the action menu should close when an option is selected
dataTeststringAdd a data-test tag for automated tests
isOpenbooleanWhether or not the action menu should be open by default
onMenuClose() => voidCallback when the action menu is closed
onMenuOpen() => voidCallback when the action menu is opened
onOptionSelect(option: OptionType) => voidCallback when an option is selected
optionsActionMenuOption[]A list of options to display in the action menu
positionPositionPosition of the action menu
renderReference(props: HTMLProps<HTMLButtonElement>) => ReactElement<any, string | JSXElementConstructor<any>>Render the reference element to be able to add the reference props directly