Skip to main content

PROYECTOVIVIANA

Menu

Menus display a list of actions or options that a user can choose. They're triggered by a button and appear as a popover.

Import

import {
  Menu,
  MenuItem,
  MenuTrigger,
  Button,
  MenuSeparator
} from '@proyecto-viviana/solid-spectrum';

Basic Usage

A simple menu with action items.

<MenuTrigger>
  <Button>Actions</Button>
  <Menu items={items}>
    {(item) => <MenuItem id={item.id}>{item.label}</MenuItem>}
  </Menu>
</MenuTrigger>

With Separators

Use separators to group related menu items.

<Menu items={items}>
  {(item) => item.isSeparator ? <MenuSeparator /> : <MenuItem id={item.id}>{item.label}</MenuItem>}
</Menu>

Disabled Items

Individual menu items can be disabled.

<MenuItem id="paste" isDisabled>
  Paste (clipboard empty)
</MenuItem>

Custom Trigger

Use any button as the menu trigger.

<MenuTrigger>
  <Button variant="accent">Open Menu</Button>
  <Menu items={items}>...</Menu>
</MenuTrigger>

Destructive Actions

Use the negative variant for destructive actions.

<MenuItem id="delete" isDestructive>
  Delete permanently
</MenuItem>

Last action: None

MenuTrigger Props

Props

Prop	Type	Default	Description
`isOpen`	boolean	—	Whether the menu is open (controlled)
`defaultOpen`	boolean	`false`	Whether the menu is open by default
`onOpenChange`	(isOpen: boolean) => void	—	Handler called when open state changes
`children`	JSX.Element	—	Trigger button and Menu component

Menu Props

Props

Prop	Type	Default	Description
`items`	T[]	—	Collection of menu items
`onAction`	(key: string) => void	—	Handler called when an item is selected
`onClose`	() => void	—	Handler called when menu closes
`disabledKeys`	Iterable<string>	—	Keys of disabled items
`children`	(item: T) => JSX.Element	—	Render function for MenuItem/MenuSeparator

MenuItem Props

Props

Prop	Type	Default	Description
`id`	string	—	Unique identifier for the item
`textValue`	string	—	Text value for typeahead
`isDisabled`	boolean	`false`	Whether the item is disabled
`onAction`	() => void	—	Handler called when item is selected
`children`	JSX.Element	—	Item content

Accessibility

Uses ARIA menu pattern with menu and menuitem roles
Arrow keys navigate between items
Home/End keys jump to first/last item
Escape closes the menu and returns focus to trigger
Type-ahead search jumps to matching items
Disabled items are focusable but not actionable (for context)