Action menu is composed of action list used for quick actions and selections. Action menus can be opened through an icon.
Example of the component mentioning the tokens and other components used.
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.
Use the appropriate ARIA attributes for screen readers where applicable.
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:
The size of the menu will depend on the length of the text of the longest action list-item
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>