yarn add @twilio-paste/menu - or - yarn add @twilio-paste/core
import {Menu, MenuButton, MenuItem, MenuSeparator, useMenuState} from '@twilio-paste/core/menu';
import {ChevronDownIcon} from '@twilio-paste/icons/esm/ChevronDownIcon';
const PreferencesMenu = () => {
const menu = useMenuState();
return (
<>
<MenuButton {...menu} variant="primary">
Preferences <ChevronDownIcon decorative />
</MenuButton>
<Menu {...menu} aria-label="Preferences">
<MenuItem {...menu}>Settings</MenuItem>
<MenuItem {...menu} disabled>
Extensions
</MenuItem>
<MenuSeparator {...menu} />
<MenuItem {...menu}>Keyboard shortcuts</MenuItem>
</Menu>
</>
);
};
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
as
- Type
any
element
Overrides the default element name to apply unique styles with the Customization Provider
- Type
any- Default
'MENU_ITEM'
href
Pass href prop to render an anchor element.
- Type
string
variant
- Type
any
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
as
- Type
any
element
Overrides the default element name to apply unique styles with the Customization Provider
- Type
any- Default
MENU_ITEM_CHECKBOX
href
Pass href prop to render an anchor element.
- Type
string
variant
- Type
any
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
as
- Type
any
element
Overrides the default element name to apply unique styles with the Customization Provider
- Type
any- Default
MENU_ITEM_CHECKBOX
href
Pass href prop to render an anchor element.
- Type
string
variant
- Type
any
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
label RequiredRequired
Accessible name of the MenuGroup.
- Type
string
element
Overrides the default element name to apply unique styles with the Customization Provider
- Type
any- Default
MENU_GROUP
icon
Pass a decorative Paste icon to display with the group label.
- Type
| string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | ReactFragment | ReactPortal
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.