Menú desplegable

Contrae un menú de acciones bajo el disparador y lo despliega al pasar el cursor o al hacer clic. El menú tiene semántica de role="menu" y admite navegación completa por teclado (flechas / Home / End / Enter / Esc) con roving tabindex.

Uso básico

Disparador por hover / clic y uso imperativo

import { LhButton, LhDropdown, LhDropdownItem } from '@lh-ui/react'

export default function Demo() {
  return (
    <LhDropdown
      onCommand={(command) => console.log(command)}
      dropdown={
        <>
          <LhDropdownItem command="new">Nuevo</LhDropdownItem>
          <LhDropdownItem command="delete" disabled>
            Eliminar
          </LhDropdownItem>
        </>
      }
    >
      <LhButton>Desplegar</LhButton>
    </LhDropdown>
  )
}

Dropdown Props

Prop	Descripción	Tipo	Valores permitidos	Predeterminado
children	Nodo disparador	ReactNode	—	—
dropdown	Contenido del menú (lista de LhDropdownItem; corresponde al slot #dropdown de plus)	ReactNode	—	—
trigger	Modo de disparo	'hover' | 'click' | 'contextmenu'	—	'hover'
placement	Posición de visualización	LhDropdownPlacement	top / bottom (con -start / -end), etc.	'bottom-start'
disabled	Desactivado	boolean	—	false
visible	Visibilidad controlada	boolean	—	—
defaultVisible	Visibilidad por defecto no controlada	boolean	—	false
hideOnClick	Si el menú se cierra automáticamente tras pulsar un elemento	boolean	—	true
maxHeight	Altura máxima del menú (se desplaza al superarse)	string | number	—	—
popperClass	Clase personalizada del menú	string	—	—
themeVars	Variables de tema a nivel de componente	Record<string, string>	—	—
sx	Props rápidas de layout (actúan sobre el disparador)	SxProps	—	—

Eventos de Dropdown

Evento	Descripción	Firma del callback	Equivalente en Vue
onCommand	Se pulsa un elemento del menú y se emite su command	(command: string | number) => void	command
onVisibleChange	Cambio de visibilidad	(visible: boolean) => void	update:visible
onClickOutside	Clic fuera del menú (el menú también se cierra internamente)	() => void	click-outside

DropdownItem Props

Prop	Descripción	Tipo	Valores permitidos	Predeterminado
children	Contenido del elemento de menú	ReactNode	—	—
command	Identificador del comando, emitido con onCommand	string | number	—	—
disabled	Si está desactivado (no responde al clic ni participa en la navegación por teclado)	boolean	—	false
divided	Si se muestra una línea separadora	boolean	—	false

Eventos de DropdownItem

Evento	Descripción	Firma del callback	Equivalente en Vue
onClick	Clic en el elemento del menú (puede coexistir con onCommand)	() => void	—

ref

forwardRef<LhDropdownInstance>. LhDropdownInstance expone show() / hide() / toggle() / isVisible.

Navegación por teclado (patrón de menú APG)

Al abrir el menú, el foco cae sobre el primer elemento habilitado; ArrowUp / ArrowDown se mueven en ciclo y saltan los elementos desactivados, Home / End van directo al primero / último, Enter / Space activan el elemento actual y Esc cierra el menú y devuelve el foco al disparador. Solo el elemento ancla tiene tabIndex={0}; los demás -1 (roving tabindex).

Slot -> prop

plus aloja el menú en el slot #dropdown; en React pasa a ser una prop dropdown del mismo nombre; el disparador contextmenu bloquea el menú contextual por defecto del navegador.

Estilos

import '@lh-ui/react/style/dropdown'