ActionMenu
This component is used to display a menu that will contain a list of menu options. The menu is dismissible if you click outside the dropdown.
Version 1.6.0
StorybookInstallation
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
Usage
Then to use the component in your code just import it!
Displaying an action menu
import ActionMenu from '@igloo-ui/action-menu';
import Button from '@igloo-ui/button';
<ActionMenu
options={[
{
label: 'Add Item',
value: 'add',
},
{
label: 'Delete Item',
value: 'delete',
disabled: true,
},
{
label: 'Copy Item',
value: 'copy',
},
]}
renderReference={(refProps) => {
return (
<Button appearance="secondary" {...refProps}>
Button
</Button>
);
}}
/>;
Calling option events
import ActionMenu from '@igloo-ui/action-menu';
import Button from '@igloo-ui/button';
<ActionMenu
options={[
{
label: 'Add Item',
value: 'add',
icon: <AddSolid size="medium" />,
onClick: () => {
alert('"Add Item" was clicked');
},
},
{
label: 'Delete Item',
value: 'delete',
icon: <Delete size="medium" />,
onClick: () => {
alert('"Delete Item" was clicked');
},
closeOnSelect: () => {
// Put some condition here
// It can also just be a boolean and not a function
return false;
},
},
{
label: 'Copy Item',
value: 'copy',
icon: <Copy size="medium" />,
onClick: () => {
alert('"Copy Item" was clicked');
},
},
]}
renderReference={(refProps) => {
return (
<Button appearance="secondary" {...refProps}>
Button
</Button>
);
}}
/>;
API
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Add a specific class to the action menu |
dataTest | string | - | Add a data-test tag for automated tests |
disablePortal | boolean | Whether or not the menu should use ReactPortal to append to the body | |
dropdownClassName | string | - | Add a specific class to the dropdown |
dropdownOffset | number | - | Offset of the dropdown |
isOpen | boolean | Whether or not the action menu should be open by default | |
onAfterMenuClose | () => void | - | Callback when the action menu is closed and animations are done |
onMenuClose | () => void | - | Callback when the action menu is closed |
onMenuOpen | () => void | - | Callback when the action menu is opened |
options | ActionMenuOption[] | - | A list of options to display in the action menu |
position | Position | Position 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 |
footer | ReactNode | - | Footer to display helper text or other content below the options |