Menu
A dropdown menu component for displaying a list of actions or options.
Usage
The Menu component provides a dropdown interface for presenting a list of actions or options to the user.
Basic Menu Example
Selection Modes
No Selection
Single Selection
Multiple Selection
Props
| Prop | Type | Default |
|---|---|---|
padding? | ConditionalStyle<Values<MapLeafNodes<Record<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "2xs" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "3xs", string>, `var(--${string})`>, { defaultClass: string; conditions: { readonly xs: string; readonly sm: string; readonly md: string; readonly lg: string; readonly xl: string; readonly default: string; }; }>> | - |
width? | ConditionalStyle<Values<{ none: string; 'fit-content': string; 'min-content': string; 'max-content': string; '1/12': string; '1/6': string; '1/4': string; '1/3': string; '5/12': string; '1/2': string; '7/12': string; '2/3': string; '3/4': string; '5/6': string; '11/12': string; full: string; device: string; xs: `var(--${string})`; sm: `var(--${string})`; md: `var(--${string})`; lg: `var(--${string})`; xl: `var(--${string})`; "2xs": `var(--${string})`; "2xl": `var(--${string})`; "3xl": `var(--${string})`; "4xl": `var(--${string})`; "5xl": `var(--${string})`; "6xl": `var(--${string})`; "3xs": `var(--${string})`; "6xs": `var(--${string})`; "5xs": `var(--${string})`; "4xs": `var(--${string})`; }, { defaultClass: string; conditions: { readonly xs: string; readonly sm: string; readonly md: string; readonly lg: string; readonly xl: string; readonly default: string; }; }>> | - |
minWidth? | ConditionalStyle<Values<{ none: string; 'fit-content': string; 'min-content': string; 'max-content': string; '1/12': string; '1/6': string; '1/4': string; '1/3': string; '5/12': string; '1/2': string; '7/12': string; '2/3': string; '3/4': string; '5/6': string; '11/12': string; full: string; device: string; xs: `var(--${string})`; sm: `var(--${string})`; md: `var(--${string})`; lg: `var(--${string})`; xl: `var(--${string})`; "2xs": `var(--${string})`; "2xl": `var(--${string})`; "3xl": `var(--${string})`; "4xl": `var(--${string})`; "5xl": `var(--${string})`; "6xl": `var(--${string})`; "3xs": `var(--${string})`; "6xs": `var(--${string})`; "5xs": `var(--${string})`; "4xs": `var(--${string})`; }, { defaultClass: string; conditions: { readonly xs: string; readonly sm: string; readonly md: string; readonly lg: string; readonly xl: string; readonly default: string; }; }>> | - |
maxWidth? | ConditionalStyle<Values<{ none: string; 'fit-content': string; 'min-content': string; 'max-content': string; '1/12': string; '1/6': string; '1/4': string; '1/3': string; '5/12': string; '1/2': string; '7/12': string; '2/3': string; '3/4': string; '5/6': string; '11/12': string; full: string; device: string; xs: `var(--${string})`; sm: `var(--${string})`; md: `var(--${string})`; lg: `var(--${string})`; xl: `var(--${string})`; "2xs": `var(--${string})`; "2xl": `var(--${string})`; "3xl": `var(--${string})`; "4xl": `var(--${string})`; "5xl": `var(--${string})`; "6xl": `var(--${string})`; "3xs": `var(--${string})`; "6xs": `var(--${string})`; "5xs": `var(--${string})`; "4xs": `var(--${string})`; }, { defaultClass: string; conditions: { readonly xs: string; readonly sm: string; readonly md: string; readonly lg: string; readonly xl: string; readonly default: string; }; }>> | - |
radius? | "xs" | "sm" | "md" | "lg" | "xl" | "none" | "round" | "2xs" | "2xl" | "3xl" | "4xl" | "3xs" | - |
dependencies? | readonly any[] | - |
renderEmptyState? | (() => ReactNode) | - |
onSelectionChange? | ((keys: Selection) => void) | - |
defaultSelectedKeys? | "all" | Iterable<Key> | - |
selectedKeys? | "all" | Iterable<Key> | - |
disallowEmptySelection? | boolean | - |
selectionMode? | SelectionMode | - |
disabledKeys? | Iterable<Key> | - |
items? | Iterable<UnknownRecord> | - |
onClose? | (() => void) | - |
onAction? | ((key: Key) => void) | - |
shouldFocusWrap? | boolean | - |
escapeKeyBehavior? | "none" | "clearSelection" | 'clearSelection' |
Edit on GitHub
Last updated on