Action menu

Live demo Design Code

Live demo

Item types

Item variants

Item padding

Icons

Disabled

Design

Usage

Action menu is composed of action list used for quick actions and selections. Action menus can be opened through an icon.

Anatomy

Example of the component mentioning the tokens and other components used.

Placement

There is no specific placement for the dropdown component but should be used when user can select multiple options in a task. Please refer to Placement in page designs for examples.

Accessibility

Use the appropriate ARIA attributes for screen readers where applicable.

Behaviour

When using a button the menu can be opened by clicking. When it is focused it can also be opened by hitting return, space or any arrow key.

The menu will close when:

clicking outside the menu item or
clicking on a item will close the menu when pressing the esc or tab key or
when pressing enter when a item is focused

The size of the menu will depend on the length of the text of the longest action list-item

Code

import { ActionMenu } from '@shieldpay/bumblebee/action-menu';

  <ActionMenu>
    <ActionMenu.ItemButton onClick={handleClick}>
      Button
    </ActionMenu.ItemButton>
    <ActionMenu.ItemLink to="/">
    Internal Link
    </ActionMenu.ItemLink>
    <ActionMenu.ItemLink href="https://react.dev/">
      External Link
    </ActionMenu.ItemLink>
  </ActionMenu>

  <ActionMenu>
    <ActionMenu.ItemButton onClick={handleClick}>
      Default Variant
    </ActionMenu.ItemButton>
    <ActionMenu.ItemButton onClick={handleClick} disabled>
      Disabled Variant
    </ActionMenu.ItemButton>
    <ActionMenu.ItemButton onClick={handleClick} variant="success">
      Success Variant
    </ActionMenu.ItemButton>
    <ActionMenu.ItemButton onClick={handleClick} variant="action">
      Action Variant
    </ActionMenu.ItemButton>
    <ActionMenu.ItemButton onClick={handleClick} variant="alert">
      Alert Variant
    </ActionMenu.ItemButton>
    <ActionMenu.ItemButton onClick={handleClick} variant="info">
      Info Variant
    </ActionMenu.ItemButton>
  </ActionMenu>

  <ActionMenu>
    <ActionMenu.ItemButton onClick={handleClick}>
      Medium sized items
    </ActionMenu.ItemButton>
    <ActionMenu.ItemButton onClick={handleClick} size="large">
      Large sized items
    </ActionMenu.ItemButton>
  </ActionMenu>

  <ActionMenu>
    <ActionMenu.ItemButton
      LeftIcon={AlertCircleIcon}
      onClick={handleClick}
      variant="alert"
    >
      Left icon
    </ActionMenu.ItemButton>
    <ActionMenu.ItemLink
      RightIcon={EditIcon}
      to="/"
      >
        Right icon
    </ActionMenu.ItemLink>
  </ActionMenu>

  <ActionMenu disabled>
    <ActionMenu.ItemButton onClick={handleClick}>
      Why are you looking at me!
    </ActionMenu.ItemButton>
  </ActionMenu>