Menu

GitHub

zeroheight

Storybook

Example

Props

Name	Type	Default Value	Required	Description
size	"medium" | "large"		Yes
items	MenuItemProps[]		Yes
header	Children		No	Optional static content that is displayed before the menu items.
trigger	(ref: Ref<HTMLElement>, props: Pick<AriaButtonProps<"button">, "id" | "aria-labelledby">, state: MenuTriggerState) => Element		Yes	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.
initialIsOpen	boolean		No
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
offset	number		No
dividers	boolean		No
maxHeight	number		No
closeOnSelect	boolean		No
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 top	No
nestedMenuOffset	number		No