Dropdown

Un menu déroulant qui s'affiche au clic, avec une API simplifiée pour une utilisation plus facile.

Exemple de base


<DropdownMenu
  trigger={<Button>Menu</Button>}
  items={[
    { id: "edit", label: "Modifier" },
    { id: "duplicate", label: "Dupliquer" },
  ]}
/>

Avec séparateur et action destructive


<DropdownMenu
    trigger={<Button variant="secondary">Actions</Button>}
    contentClassName="min-w-[120px]"
    items={[
        { id: "edit", label: "Edit", onClick: () => console.log("Edit") },
        { id: "duplicate", label: "Duplicate", onClick: () => console.log("Duplicate") },
        { id: "sep1", type: "separator" },
        { id: "delete", label: "Delete", variant: "destructive", onClick: () => console.log("Delete") },
    ]}
/>

Avec radio group


<DropdownMenu
  trigger={<Button>Theme</Button>}
  contentClassName="min-w-[120px]"
  radioGroupValue={theme}
  onRadioValueChange={setTheme}
  items={[
      { id: "light", type: "radio", label: "Light", value: "light" },
      { id: "dark", type: "radio", label: "Dark", value: "dark" },
      { id: "system", type: "radio", label: "System", value: "system" },
  ]}
/>

Avec checkboxes


<DropdownMenu
  trigger={<Button>Options</Button>}
  contentClassName="min-w-[180px]"
  items={[
      {
          id: "notifications",
          type: "checkbox",
          label: "Show notifications",
          checked: showNotifications,
          onClick: () => setShowNotifications(!showNotifications),
      },
      {
          id: "darkmode",
          type: "checkbox",
          label: "Enable dark mode",
          checked: darkModeEnabled,
          onClick: () => setDarkModeEnabled(!darkModeEnabled),
      },
  ]}
/>

Avec groupes et sous-menus


<DropdownMenu
  trigger={<Button variant="secondary">Open</Button>}
  contentClassName="w-56"
  align="start"
  contentLabel="My Account"
  groups={[
      {
          id: "account",
          items: [
              { id: "profile", label: "Profile", shortcut: "⇧⌘P" },
              { id: "billing", label: "Billing", shortcut: "⌘B" },
              { id: "settings", label: "Settings", shortcut: "⌘S" },
              { id: "shortcuts", label: "Keyboard shortcuts", shortcut: "⌘K" },
          ],
      },
      {
          id: "team",
          items: [
              { id: "team", label: "Team" },
              {
                  id: "invite",
                  type: "sub",
                  label: "Invite users",
                  items: [
                      { id: "email", label: "Email" },
                      { id: "message", label: "Message" },
                      { id: "sep2", type: "separator" },
                      { id: "more", label: "More..." },
                  ],
              },
              { id: "newteam", label: "New Team", shortcut: "⌘+T" },
          ],
      },
      {
          id: "external",
          items: [
              { id: "github", label: "GitHub" },
              { id: "support", label: "Support" },
              { id: "api", label: "API", disabled: true },
          ],
      },
      { id: "logout", items: [{ id: "logout", label: "Log out", shortcut: "⇧⌘Q" }] },
  ]}
/>

Avec bouton dots


<DropdownMenu
  trigger={<DropdownDotsButton />}
  align="end"
  contentClassName="min-w-[100px]"
  items={[
      { id: "view", label: "View details" },
      { id: "archive", label: "Archive" },
      { id: "remove", label: "Remove", variant: "destructive" },
  ]}
/>

API Reference

Props	Type	Default	Description
trigger	React.ReactNode	—	Élément déclencheur du menu
items?	DropdownMenuItemData[]	[]	Liste des éléments
groups?	DropdownMenuGroupData[]	[]	Groupes d’éléments avec séparateur
contentLabel?	string	—	Label global affiché en haut
contentClassName?	string	—	Classe appliquée au contenu
itemClassName?	string	—	Classe appliquée aux items
radioGroupValue?(requis dans radiio group)	string	—	Valeur sélectionnée pour radio
onRadioValueChange?(requis dans radiio group)	(value: string) => void	—	Callback lors du changement radio
side?	"top" \| "right" \| "bottom" \| "left"	bottom	Position du menu
sideOffset?	number	4	Décalage entre trigger et menu
align?	"start" \| "center" \| "end"	center	Alignement horizontal
alignOffset?	number	0	Décalage d’alignement
defaultOpen?	boolean	false	État initial ouvert/fermé
open?	boolean	—	Mode contrôlé (open/close)
onOpenChange?	(open: boolean) => void	—	Callback ouverture/fermeture
modal?	boolean	true	Capture le focus (mode modal)

DropdownMenuItemData

Props	Type	Default	Description
`id`	`string`	-	Identifiant unique de l’élément
`type?`	`"item" \| "checkbox" \| "radio" \| "separator" \| "label" \| "sub"`	`item`	Type d’élément de menu
`label`	`React.ReactNode`	-	Contenu affiché de l’élément
`shortcut?`	`string`	-	Texte d’un raccourci clavier (ex: ⌘C)
`onClick?`	`() => void`	-	Callback déclenché lors du clic
`disabled?`	`boolean`	`false`	Désactive l’élément
`variant?`	`"default" \| "destructive"`	`default`	Style visuel de l’élément
`checked?`	`boolean`	`false`	État pour les `checkbox`
`value`	`string`	-	Valeur pour les `radio`
`inset?`	`boolean`	`false`	Ajoute une indentation visuelle
`href?`	`string`	-	Si présent, rend l’item cliquable comme un lien
`asChild?`	`boolean`	`false`	Permet d’utiliser un autre composant via `asChild`
`items?(requis pour les sous-menus)`	`DropdownMenuItemData[]`	-	Liste de sous-éléments (uniquement pour `sub`)

DropdownMenuGroupData

Props	Type	Default	Description
`id`	`string`	-	Identifiant unique du groupe
`label?`	`string`	-	Label affiché en en-tête du groupe
`items`	`DropdownMenuItemData[]`	[]	Liste des items du groupe