Menu déroulant

Replie un menu d'actions sous un déclencheur et se déploie au survol ou au clic. Le menu a la sémantique role="menu" et prend en charge une navigation clavier complète (touches directionnelles / Début / Fin / Entrée / Échap) ainsi que le roving tabindex.

Utilisation de base

Déclenchement au survol / au clic et usage impératif

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

export default function Demo() {
  return (
    <LhDropdown
      onCommand={(command) => console.log(command)}
      dropdown={
        <>
          <LhDropdownItem command="new">Nouveau</LhDropdownItem>
          <LhDropdownItem command="delete" disabled>
            Supprimer
          </LhDropdownItem>
        </>
      }
    >
      <LhButton>Déplier</LhButton>
    </LhDropdown>
  )
}

Dropdown Props

Prop	Description	Type	Options	Valeur par défaut
children	Nœud déclencheur	ReactNode	—	—
dropdown	Contenu du menu (liste de LhDropdownItem, équivalent du slot #dropdown de plus)	ReactNode	—	—
trigger	Mode de déclenchement	'hover' | 'click' | 'contextmenu'	—	'hover'
placement	Position d'affichage	LhDropdownPlacement	top / bottom (avec -start / -end), etc.	'bottom-start'
disabled	Désactivé	boolean	—	false
visible	Affichage contrôlé	boolean	—	—
defaultVisible	Affichage par défaut en mode non contrôlé	boolean	—	false
hideOnClick	Fermeture automatique après clic sur un élément de menu	boolean	—	true
maxHeight	Hauteur maximale du menu (défilement au-delà)	string | number	—	—
popperClass	Classe personnalisée du menu	string	—	—
themeVars	Variables de thème au niveau du composant	Record<string, string>	—	—
sx	Raccourci de mise en page (appliqué au déclencheur)	SxProps	—	—

Événements de Dropdown

Événement	Description	Signature du rappel	Équivalent Vue
onCommand	Clic sur un élément de menu : émet le command de cet élément	(command: string | number) => void	command
onVisibleChange	Changement d'affichage	(visible: boolean) => void	update:visible
onClickOutside	Clic en dehors du menu (provoque également sa fermeture)	() => void	click-outside

DropdownItem Props

Prop	Description	Type	Options	Valeur par défaut
children	Contenu de l'élément de menu	ReactNode	—	—
command	Identifiant de commande, émis avec onCommand	string | number	—	—
disabled	Désactivé ou non (ne répond pas au clic et exclu de la navigation clavier)	boolean	—	false
divided	Afficher ou non un trait de séparation	boolean	—	false

Événements de DropdownItem

Événement	Description	Signature du rappel	Équivalent Vue
onClick	Clic sur l'élément de menu (peut cohabiter avec onCommand)	() => void	—

ref

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

Navigation clavier (modèle de menu APG)

À l'ouverture du menu, le focus se place sur le premier élément actif ; Flèche haut / Flèche bas se déplacent en boucle en sautant les éléments désactivés, Début / Fin atteignent les extrémités, Entrée / Espace activent l'élément courant, et Échap ferme le menu et rend le focus au déclencheur. Seul l'élément d'ancrage porte tabIndex={0}, les autres -1 (roving tabindex).

Slot → prop

plus porte le menu via le slot #dropdown ; côté React il devient la prop dropdown de même nom ; le déclenchement contextmenu empêche le menu contextuel natif du navigateur.

Styles

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