Props for Menu in @proyecto-viviana/ui
Prop	Type	Default	Description
`class`	string	—	Additional CSS class name.
`hideLinkOutIcon`	false \| true	—	Hides the default link out icons on menu items that open links in a new tab.
`size`	'S' \| 'M' \| 'L' \| 'XL' \| 'sm' \| 'md' \| 'lg'	`'M'`	The size of the menu.
`styles`	StyleString \| (() => StyleString \| undefined)	—	Spectrum-defined generated classes.
`UNSAFE_className`	string	—	Additional CSS class name. Use only as a last resort.
`UNSAFE_style`	JSX.CSSProperties	—	Additional inline styles. Use only as a last resort.
`ref`	HTMLDivElement \| ((el: HTMLDivElement) => void) \| { current?: HTMLDivElement \| null \| undefined; }	—	Ref for the menu element.
`children`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement \| ((item: T) => JSX.Element)	—	The children of the component. A function may be provided to render each item. solidaria-components
`slot`	string \| false	—	A slot name for the component. HTML `slot` may be `false` to omit. solidaria-components
`id`	string	—	An ID for the menu. solidaria
`onBlur`	(e: FocusEvent) => void	—	Handler called when focus moves out of the menu. solidaria
`onClose`	() => void	—	Handler called when the menu should close. solidaria-components
`onFocus`	(e: FocusEvent) => void	—	Handler called when focus moves into the menu. solidaria
`onSelectionChange`	(keys: "all" \| Set<Key>) => void	—	Handler for selection changes. solid-stately
`aria-describedby`	string	—	The ID of an element that describes the menu. solidaria
`aria-label`	string	—	An accessible label for the menu when no visible label is provided. solidaria
`aria-labelledby`	string	—	The ID of an element that labels the menu. solidaria
`isDisabled`	false \| true	—	Whether the menu is disabled. solidaria
`render`	(props: JSX.HTMLAttributes<HTMLDivElement>, renderProps: MenuRenderProps) => JSX.Element	—	Custom renderer for the menu element. solidaria-components
`autoFocus`	false \| true \| 'first' \| 'last'	—	Whether to auto-focus the menu root (`true`) or the first/last item. solidaria
`onFocusChange`	(isFocused: boolean) => void	—	Handler called when the focus state changes. solidaria
`selectionMode`	'none' \| 'single' \| 'multiple'	—	The selection mode. solid-stately
`disallowEmptySelection`	false \| true	—	Whether empty selection is disallowed. solid-stately
`selectedKeys`	"all" \| Iterable<Key>	—	Currently selected keys (controlled). solid-stately
`defaultSelectedKeys`	"all" \| Iterable<Key>	—	Default selected keys (uncontrolled). solid-stately
`items`	CollectionEntry<T>[]	—	The items to render in the menu. solidaria-components
`label`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement	—	The label for the menu. solidaria
`onAction`	(key: Key, value: T) => void	—	Handler called when an item is activated, with the activated item's value. solidaria-components
`shouldCloseOnSelect`	false \| true	—	Whether the menu should close when an item is selected. solidaria-components
`shouldFocusWrap`	false \| true	—	Whether focus should automatically wrap around. solidaria
`disallowTypeAhead`	false \| true	`false`	Whether type-to-select is disabled. solidaria
`selectionBehavior`	'toggle' \| 'replace'	—	How selection behaves on interaction. solid-stately
`allowDuplicateSelectionEvents`	false \| true	—	Whether to allow duplicate selection events. solid-stately
`getKey`	(item: T) => Key	—	Function to get the key from an item. solidaria-components
`getTextValue`	(item: T) => string	—	Function to get the text value from an item. solidaria-components
`getDisabled`	(item: T) => boolean	—	Function to check if an item is disabled. solidaria-components
`disabledKeys`	Iterable<Key>	—	Keys of disabled items. solidaria-components
`disabledBehavior`	'all' \| 'selection'	—	Whether disabled items can still receive focus. solidaria-components
`staticChildren`	() => JSX.Element \| undefined	—	Internal lazy static children accessor used when collection children need menu context. solidaria-components
`renderEmptyState`	() => JSX.Element	—	Content to display when the menu has no items. solidaria-components
`dragAndDropHooks`	DragAndDropHooks<T>	—	Drag and drop hooks from `useDragAndDrop`. solidaria-components

Declared in packages/viviana-ui/src/menu/index.tsx.

MenuButton props

Props for MenuButton in @proyecto-viviana/ui
Prop	Type	Default	Description
`class`	string	—	Additional CSS class name.
`variant`	'primary' \| 'secondary' \| 'quiet'	—	Visual variant of the button.
`children`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement \| ((renderProps: ButtonRenderProps) => JSX.Element)	—	The children of the component. A function may be provided to receive render props. solidaria-components
`slot`	string \| false	—	A slot name for the component. HTML `slot` may be `false` to omit. solidaria-components
`ref`	((el: HTMLButtonElement) => void) \| { current?: HTMLButtonElement \| null \| undefined; }	—	Ref for the underlying button element. solidaria-components
`id`	string \| number	—	The element's unique identifier. solidaria
`onClick`	(e: MouseEvent) => void	—	A native click handler, useful for form submission. Note: `onPress` is preferred for cross-device compatibility. solidaria
`aria-controls`	string	—	Identifies the element (or elements) whose contents or presence are controlled by the button. solidaria
`aria-current`	false \| true \| 'page' \| 'step' \| 'location' \| 'date' \| 'time' \| 'true' \| 'false'	—	Indicates the current "pressed" state of toggle buttons. solidaria
`aria-describedby`	string	—	The id of the element that describes the button. solidaria
`aria-details`	string	—	The id of the element that provides detailed, extended description for the button. solidaria
`aria-disabled`	false \| true \| 'true' \| 'false'	—	Indicates that the button is perceivable but disabled. solidaria
`aria-expanded`	false \| true \| 'true' \| 'false'	—	Whether the popup is expanded. solidaria
`aria-haspopup`	false \| true \| 'true' \| 'false' \| 'menu' \| 'listbox' \| 'tree' \| 'grid' \| 'dialog'	—	Whether the button has a popup. solidaria
`aria-label`	string	—	The accessible label for the button. solidaria
`aria-labelledby`	string	—	The id of the element that labels the button. solidaria
`aria-pressed`	false \| true \| 'true' \| 'false' \| 'mixed'	—	Whether the button is in a pressed state (controlled). solidaria
`isDisabled`	boolean \| Accessor<boolean>	—	Whether the button is disabled. solidaria
`render`	(props: JSX.ButtonHTMLAttributes<HTMLButtonElement>, renderProps: ButtonRenderProps) => JSX.Element	—	Custom renderer for the outer button element. solidaria-components
`isPendingFocusable`	false \| true	—	Keeps pending buttons focusable by using aria-disabled without a native disabled attribute. solidaria-components
`onHoverStart`	(e: HoverEvent) => void	—	Handler called when hover starts. solidaria-components
`onHoverEnd`	(e: HoverEvent) => void	—	Handler called when hover ends. solidaria-components
`onHoverChange`	(isHovered: boolean) => void	—	Handler called when hover state changes. solidaria-components
`elementType`	'button' \| 'a' \| 'div' \| 'input' \| 'span'	—	The HTML element type to use for the button. solidaria
`href`	string	—	The URL to link to (for anchor elements). solidaria
`target`	string	—	The target for the link (for anchor elements). solidaria
`rel`	string	—	The rel attribute for the link (for anchor elements). solidaria
`allowFocusWhenDisabled`	false \| true	—	Whether to allow focus on the button when it is disabled. This enables showing tooltips on disabled buttons. When true, the button gets `tabIndex=-1` instead of being removed from tab order. solidaria
`onPress`	(e: PressEvent) => void	—	Handler called when the press is released over the target. solidaria
`onPressStart`	(e: PressEvent) => void	—	Handler called when a press interaction starts. solidaria
`onPressEnd`	(e: PressEvent) => void	—	Handler called when a press interaction ends. solidaria
`onPressUp`	(e: PressEvent) => void	—	Handler called when a press is released over the target. solidaria
`onPressChange`	(isPressed: boolean) => void	—	Handler called when the press state changes. solidaria
`preventFocusOnPress`	false \| true	—	Whether the button should not receive focus on press. solidaria
`autoFocus`	false \| true	—	Whether the element should receive focus on render. solidaria
`type`	'button' \| 'submit' \| 'reset'	—	The type attribute for button elements. solidaria
`form`	string	—	Additional attributes for form buttons. solidaria
`formAction`	string	—	Not yet documented solidaria
`formEncType`	string	—	Not yet documented solidaria
`formMethod`	string	—	Not yet documented solidaria
`formNoValidate`	false \| true	—	Not yet documented solidaria
`formTarget`	string	—	Not yet documented solidaria
`name`	string	—	The name attribute for form buttons. solidaria
`value`	string	—	The value attribute for form buttons. solidaria
`excludeFromTabOrder`	false \| true	—	Whether to exclude the button from the tab order. solidaria
`isPending`	false \| true	—	Whether the button is in a pending state. solidaria-components

Declared in packages/viviana-ui/src/menu/index.tsx.

MenuItem props

Props for MenuItem in @proyecto-viviana/ui
Prop	Type	Default	Description
`class`	string	—	Additional CSS class name.
`styles`	StyleString \| (() => StyleString \| undefined)	—	Spectrum-defined generated classes.
`UNSAFE_className`	string	—	Additional CSS class name. Use only as a last resort.
`UNSAFE_style`	JSX.CSSProperties	—	Additional inline styles. Use only as a last resort.
`ref`	HTMLElement \| ((el: HTMLElement) => void) \| { current?: HTMLElement \| null \| undefined; }	—	Ref for the menu item element (a `<div>`, or an `<a>` for link items).
`icon`	() => JSX.Element	—	Optional icon to display before the label. Use a function returning JSX for SSR compatibility: `icon={() => <MyIcon />}`
`shortcut`	string	—	Optional keyboard shortcut to display.
`isDestructive`	false \| true	—	Whether this is a destructive action.
`children`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement \| ((renderProps: MenuItemRenderProps) => JSX.Element)	—	The children of the item. A function may be provided to receive render props. solidaria-components
`slot`	string \| false	—	A slot name for the component. HTML `slot` may be `false` to omit. solidaria-components
`id`*	Key	—	The unique key for the item. solidaria-components
`aria-controls`	string	—	Element controlled by this menu item, for submenu triggers. solidaria
`aria-describedby`	string	—	Identifies the element(s) that describe the menu item. solidaria
`aria-expanded`	false \| true \| 'true' \| 'false'	—	Whether the submenu or subdialog is expanded. solidaria
`aria-haspopup`	string \| boolean	—	Whether this menu item opens a submenu or subdialog. solidaria
`aria-label`	string	—	An accessible label for the menu item. solidaria
`isDisabled`	false \| true	—	Whether the menu item is disabled. solidaria
`render`	(props: JSX.HTMLAttributes<HTMLElement>, renderProps: MenuItemRenderProps) => JSX.Element	—	Custom renderer for the menu item element. solidaria-components
`onHoverStart`	() => void	—	Handler called when hover starts. solidaria-components
`onHoverEnd`	() => void	—	Handler called when hover ends. solidaria-components
`onHoverChange`	(isHovered: boolean) => void	—	Handler called when hover state changes. solidaria-components
`href`	string	—	A URL to link to. Turns the menu item into a link. solidaria-components
`target`	string	—	The target window for the link. solidaria-components
`rel`	string	—	The relationship between the linked resource and the current page. solidaria-components
`download`	string \| boolean	—	Causes the browser to download the linked URL. solidaria-components
`onAction`	() => void	—	Handler called when the item is activated. solidaria-components
`isVirtualized`	false \| true	—	Whether the menu item is contained in a virtual scrolling menu. solidaria
`closeOnSelect`	false \| true	—	Whether to close the menu when this item is selected. solidaria
`item`	NonNullable<T>	—	The item value. solidaria-components
`textValue`	string	—	The text value of the item (for typeahead). solidaria-components

Declared in packages/viviana-ui/src/menu/index.tsx.

MenuSection props

Props for MenuSection in @proyecto-viviana/ui
Prop	Type	Default	Description
`class`	string	—	Additional CSS class name.
`children`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement	—	Section contents, usually Header + Group/items. solidaria-components
`slot`	string \| false	—	A slot name for the component. HTML `slot` may be `false` to omit. solidaria-components
`ref`	((el: HTMLDivElement) => void) \| { current?: HTMLDivElement \| null \| undefined; }	—	Ref for the section element. solidaria-components
`id`	string	—	DOM id forwarded to the section element. solidaria-components
`onSelectionChange`	(keys: Selection) => void	—	Handler for selection changes. solid-stately
`aria-label`	string	—	Accessible name when the section has no naming header. solidaria-components
`aria-labelledby`	string	—	Id of the element that names the section. solidaria-components
`role`	false \| 'group' \| 'region' \| 'none' \| 'form' \| 'menu' \| 'listbox' \| 'tree' \| 'grid' \| 'dialog' \| 'button' \| 'alert' \| 'alertdialog' \| 'application' \| 'article' \| 'banner' \| 'cell' \| 'checkbox' \| 'columnheader' \| 'combobox' \| 'complementary' \| 'contentinfo' \| 'definition' \| 'directory' \| 'document' \| 'feed' \| 'figure' \| 'gridcell' \| 'heading' \| 'img' \| 'link' \| 'list' \| 'listitem' \| 'log' \| 'main' \| 'marquee' \| 'math' \| 'menubar' \| 'menuitem' \| 'menuitemcheckbox' \| 'menuitemradio' \| 'meter' \| 'navigation' \| 'note' \| 'option' \| 'presentation' \| 'progressbar' \| 'radio' \| 'radiogroup' \| 'row' \| 'rowgroup' \| 'rowheader' \| 'scrollbar' \| 'search' \| 'searchbox' \| 'separator' \| 'slider' \| 'spinbutton' \| 'status' \| 'switch' \| 'tab' \| 'table' \| 'tablist' \| 'tabpanel' \| 'term' \| 'textbox' \| 'timer' \| 'toolbar' \| 'tooltip' \| 'treegrid' \| 'treeitem'	—	ARIA role forwarded to the section element. solidaria-components
`selectionMode`	'none' \| 'single' \| 'multiple'	—	The selection mode. solid-stately
`disallowEmptySelection`	false \| true	—	Whether empty selection is disallowed. solid-stately
`selectedKeys`	"all" \| Iterable<Key>	—	Currently selected keys (controlled). solid-stately
`defaultSelectedKeys`	"all" \| Iterable<Key>	—	Default selected keys (uncontrolled). solid-stately
`shouldCloseOnSelect`	false \| true	—	Whether menu items in this section should close the menu when selected. solidaria-components
`selectionBehavior`	'toggle' \| 'replace'	—	How selection behaves on interaction. solid-stately
`allowDuplicateSelectionEvents`	false \| true	—	Whether to allow duplicate selection events. solid-stately
`disabledKeys`	Iterable<Key>	—	Keys of disabled items. solid-stately
`disabledBehavior`	'all' \| 'selection'	—	How disabled keys behave. solid-stately

Declared in packages/viviana-ui/src/menu/index.tsx.

MenuSeparator props

Props for MenuSeparator in @proyecto-viviana/ui
Prop	Type	Default	Description
`class`	string	—	Additional CSS class name.

Declared in packages/viviana-ui/src/menu/index.tsx.

MenuTrigger props

Props for MenuTrigger in @proyecto-viviana/ui
Prop	Type	Default	Description
`size`	'S' \| 'M' \| 'L' \| 'XL' \| 'sm' \| 'md' \| 'lg'	—	The size of the menu.
`align`	'start' \| 'end'	`'start'`	Alignment of the menu relative to the trigger.
`direction`	'start' \| 'end' \| 'top' \| 'bottom' \| 'left' \| 'right'	`'bottom'`	Where the Menu opens relative to its trigger.
`shouldFlip`	false \| true	—	Whether the menu should automatically flip direction when space is limited.
`class`	string	—	Additional CSS class name.
`children`*	JSX.Element	—	The children of the trigger (typically a Button and Menu). solidaria-components
`slot`	string \| false	—	A slot name for the component. HTML `slot` may be `false` to omit. solidaria-components
`id`	string	—	An ID for the menu. This is a local Solid addition. solidaria
`isDisabled`	false \| true	—	Whether the menu trigger is disabled. solidaria-components
`type`	'menu' \| 'listbox'	—	The type of menu that the trigger opens. solidaria
`trigger`	'press' \| 'longPress' \| 'contextMenu'	—	How the menu is triggered. solidaria
`defaultOpen`	false \| true	—	Whether the menu is open by default. solidaria-components
`isOpen`	false \| true	—	Whether the menu is open (controlled). solidaria-components
`onOpenChange`	(isOpen: boolean) => void	—	Handler called when the open state changes. solidaria-components

Declared in packages/viviana-ui/src/menu/index.tsx.

SubmenuTrigger props

Props for SubmenuTrigger in @proyecto-viviana/ui
Prop	Type	Default	Description
`children`*	JSX.Element	—	The trigger item followed by submenu content. solidaria-components
`delay`	number	—	Delay before opening the submenu on hover. solidaria-components
`isOpen`	false \| true	—	Whether the submenu is open (controlled). solidaria-components
`defaultOpen`	false \| true	—	Whether the submenu is open by default. solidaria-components
`onOpenChange`	(isOpen: boolean) => void	—	Handler called when the submenu open state changes. solidaria-components
`slot`	string \| false	—	A slot name for the component. HTML `slot` may be `false` to omit. solidaria-components

Declared in packages/viviana-ui/src/menu/SubmenuTrigger.tsx.

UnavailableMenuItemTrigger props

Props for UnavailableMenuItemTrigger in @proyecto-viviana/ui
Prop	Type	Default	Description
`children`*	JSX.Element \| JSX.Element[]	—	The menu item followed by contextual help popover content.
`isUnavailable`	false \| true	—	Whether the menu item should expose unavailable contextual help.

Declared in packages/viviana-ui/src/menu/index.tsx.

Props marked solidaria or solidaria-components come from the headless layer underneath and behave the same in both registers. Components that wrap a DOM element also accept that element's standard attributes, which are left out here on purpose — listing them would bury the props that are actually ours.

Menu

Import

Props

MenuButton props

MenuItem props

MenuSection props

MenuSeparator props

MenuTrigger props

SubmenuTrigger props

UnavailableMenuItemTrigger props