DropdownMenu

Menu contextuel affiche au clic sur un declencheur. Construit sur Radix UI DropdownMenu avec support clavier complet, sous-menus, separateurs et items destructifs.

Preview

Menu avec label, items avec icones, separateurs et un item destructif pour la deconnexion.

Props

DropdownMenu (Root)

Prop	Type	Default	Description
open	boolean	—	Controle l'ouverture du menu (mode controle).
defaultOpen	boolean	false	Etat d'ouverture par defaut.
onOpenChange	(open: boolean) => void	—	Callback appele quand l'etat d'ouverture change.

DropdownMenuTrigger

Prop	Type	Default	Description
asChild	boolean	false	Si true, rend l'enfant direct au lieu d'un <button>.

DropdownMenuContent

Prop	Type	Default	Description
align	"start" \| "center" \| "end"	"center"	Alignement du menu par rapport au trigger.
sideOffset	number	4	Decalage en pixels par rapport au trigger.
className	string	—	Classes CSS additionnelles.

DropdownMenuItem

Prop	Type	Default	Description
variant	"default" \| "destructive"	"default"	Style de l'item. Destructive applique un style rouge pour les actions dangereuses.
inset	boolean	false	Ajoute un padding gauche supplementaire (pl-8) pour aligner avec les items qui ont des icones.
disabled	boolean	false	Desactive l'item (opacity reduite, non-cliquable).

Autres sous-composants

Prop	Type	Default	Description
DropdownMenuLabel	Radix DropdownMenuPrimitive.Label	—	Label non-interactif pour grouper des items. text-sm font-medium.
DropdownMenuSeparator	Radix DropdownMenuPrimitive.Separator	—	Ligne de separation horizontale entre les groupes d'items.
DropdownMenuGroup	Radix DropdownMenuPrimitive.Group	—	Conteneur semantique pour grouper des items.
DropdownMenuShortcut	span	—	Texte de raccourci clavier affiche a droite de l'item. text-xs tracking-widest.