LifeUI

1.53.2

Menu

Muestra un menú a con una lista de acciones o funciones.

Menú con Items Deshabilitados

Menú con Submenús

Ejemplos

Props

Prop	Tipo	Requerido	Descripción
`open`	`boolean`	-	Si el menú está abierto.
`onOpenChange`	`(open: boolean) => void`	-	Callback cuando cambia el estado abierto/cerrado.
`defaultOpen`	`boolean`	-	Estado inicial del menú.
`modal`	`boolean`	-	Si el menú es modal.
`children`	`ReactNode`	-	Componentes del menú.
`classNames`	`{ content?: string; item?: string; submenuTrigger?: string; submenuContent?: string }`	-	Clases CSS para diferentes partes del menú.
`onSelectAction`	`(actionName: string) => void`	-	Callback cuando se selecciona una acción con prop action.

MenuTrigger

Prop	Tipo	Requerido	Descripción
`children`	`ReactNode`	-	Elemento que activa el menú.
`asChild`	`boolean`	-	Si renderizar como elemento hijo.
`className`	`string`	-	Clases CSS adicionales para el trigger.

MenuContent

Prop	Tipo	Requerido	Descripción
`children`	`ReactNode`	-	Contenido del menú.
`side`	`'top' \| 'right' \| 'bottom' \| 'left'`	-	Lado desde donde aparece el menú.
`sideOffset`	`number`	-	Distancia desde el trigger (por defecto: 10).
`align`	`'start' \| 'center' \| 'end'`	-	Alineación del contenido.
`alignOffset`	`number`	-	Offset de alineación.
`className`	`string`	-	Clases CSS adicionales para el contenido.

MenuItem

Prop	Tipo	Requerido	Descripción
`children`	`ReactNode`	-	Contenido del item del menú.
`disabled`	`boolean`	-	Si el item está deshabilitado.
`onClick`	`(event: MouseEvent) => void`	-	Callback cuando se hace clic en el item.
`action`	`string`	-	Nombre de la acción para onSelectAction del Menu (prop personalizada).
`className`	`string`	-	Clases CSS adicionales para el item.

Submenu

Prop	Tipo	Requerido	Descripción
`children`	`ReactNode`	-	Componentes del submenú.

SubmenuTrigger

Prop	Tipo	Requerido	Descripción
`children`	`ReactNode`	-	Contenido del trigger del submenú.
`disabled`	`boolean`	-	Si el trigger está deshabilitado.
`onClick`	`(event: MouseEvent) => void`	-	Callback cuando se hace clic en el trigger.
`action`	`string`	-	Nombre de la acción para onSelectAction del Menu (prop personalizada).
`className`	`string`	-	Clases CSS adicionales para el trigger.

SubmenuContent

Prop	Tipo	Requerido	Descripción
`children`	`ReactNode`	-	Contenido del submenú.
`side`	`'top' \| 'right' \| 'bottom' \| 'left'`	-	Lado desde donde aparece el submenú.
`sideOffset`	`number`	-	Distancia desde el trigger (por defecto: 3).
`align`	`'start' \| 'center' \| 'end'`	-	Alineación del contenido.
`alignOffset`	`number`	-	Offset de alineación.
`className`	`string`	-	Clases CSS adicionales para el contenido.

Una etiqueta identifica y describe el propósito de un campo de entrada, ayudando a los usuarios a entender qué información se requiere.

Una ventana superpuesta a la ventana principal