DropdownMenu

Un menu accroché à un bouton.

Il repose sur Overlay : le repositionnement quand la place manque en bas, la fermeture au clic extérieur et à Échap sont déjà là et ne sont pas réécrites ici.

Installation

sia-ui add dropdown-menu

Ou par le paquet, sans rien copier :

import { DropdownMenu, MenuList, ContextMenu } from "@sia-ui/react-web";

Props de MenuList

Le panneau seul, sans déclencheur.

Extrait parce que DropdownMenu et ContextMenu n'ont en commun que lui : tout le reste — l'ancrage, le geste d'ouverture — diffère.

Prop	Type	Défaut	Description
* activeIndex	number	—	Index actif, piloté par le parent pour que le clavier suive.
* items	MenuEntry[]	—
* onActiveIndexChange	(index: number) => void	—
* onClose	() => void	—
* onSelect	(item: MenuItem) => void	—
className	string	—
id	string	—

Props de DropdownMenu

Prop	Type	Défaut	Description
* items	MenuEntry[]	—
className	string	—
defaultOpen	boolean	false
matchTriggerWidth	boolean	false
onOpenChange	(open: boolean) => void	—
onSelect	(item: MenuItem) => void	—
open	boolean	—
overlayProps	Partial<Omit<OverlayProps, "children" | "open" | "onOpenChange" | "anchorRef">>	—	Le positionnement du panneau : décalage, marge au bord de l'écran, id.
placement	OverlayPlacement	bottom-start

Props de ContextMenu

Le même menu, ouvert au clic droit sur une zone.

L'ancre est un point, pas un élément : un repère de taille nulle est posé aux coordonnées du pointeur et confié à Overlay, qui ne voit pas la différence. C'est ce qui évite un second moteur de placement.

Prop	Type	Défaut	Description
* items	MenuEntry[]	—
className	string	—
onSelect	(item: MenuItem) => void	—
overlayProps	Partial<Omit<OverlayProps, "children" | "open" | "onOpenChange" | "anchorRef">>	—	Le positionnement du panneau, comme pour DropdownMenu.

* obligatoire.

Voir aussi

• Le composant dans le catalogue — états, variantes, et bac à sable.
• La référence complète — tous les composants.