
import { Menu, Button } from '@gg-software/ui';
 
<Menu
    trigger={<Button>Actions ▾</Button>}
    placement="bottom-start"
    items={[
        { key: 'edit', label: 'Edit', shortcut: '⌘E', onClick: () => edit() },
        { key: 'duplicate', label: 'Duplicate', onClick: () => duplicate() },
        { divider: true },
        { key: 'delete', label: 'Delete', danger: true, onClick: () => confirmDelete() },
    ]}
/>;

Props

Prop	Type	Default
`trigger`*	`ReactNode`	—
`items`*	`MenuItem[]`	—
`placement`	`"left" \| "right" \| "top" \| "bottom" \| "top-start" \| "top-end" \| "bottom-start" \| "bottom-end"`	`bottom-start`
`className`	`string`	—

* required · generated from packages/ui/src/navigation/Menu/Menu.tsx

Types


type MenuItem = {
    key?: string;
    label?: ReactNode;
    icon?: ReactNode;
    shortcut?: ReactNode;
    danger?: boolean;
    disabled?: boolean;
    onClick?: () => void;
    divider?: boolean; // renders a separator instead of an item
};