Skip to main content

Menu


Example

Props

NameTypeDefault ValueRequiredDescription
size"medium" | "large"Yes
itemsMenuItemProps[]Yes
headerChildrenNo

Optional static content that is displayed before the menu items.

trigger(ref: Ref<HTMLElement>, props: Pick<AriaButtonProps<"button">, "id" | "aria-labelledby">, state: MenuTriggerState) => ElementYes

The trigger element that will be used to open the menu. It must accept a ref prop and other accessibility props to ensure the menu is properly connected to its trigger, for accessibility purposes.

It can use the state parameter to determine and change the menu state.

initialIsOpenbooleanNo
placement"bottom" | "left" | "right" | "top" | "end" | "start" | "bottom left" | "bottom right" | "bottom start" | "bottom end" | "top left" | "top right" | "top start" | "top end" | "left top" | "left bottom" | "start top" | "start bottom" | "right top" | "right bottom" | "end top" | "end bottom"No
offsetnumberNo
dividersbooleanNo
maxHeightnumberNo
closeOnSelectbooleanNo
nestedMenuPlacement"bottom" | "left" | "right" | "top" | "end" | "start" | "bottom left" | "bottom right" | "bottom start" | "bottom end" | "top left" | "top right" | "top start" | "top end" | "left top" | "left bottom" | "start top" | "start bottom" | "right top" | "right bottom" | "end top" | "end bottom"right topNo
nestedMenuOffsetnumberNo