# DropdownMenu : un menu d’actions compact dans la barre d’outils d’un bloc

> Une barre d'outils saturée de boutons devient illisible bien avant d'être pleine. DropdownMenu regroupe les actions secondaires derrière une seule icône, avec un rendu par fonction enfant plutôt qu'un simple tableau.

- Auteur : WordPress Développement
- Publié le : 2026-10-19
- Mis à jour le : 2026-09-30
- Catégorie : Blocs Gutenberg
- URL : https://www.wpmoderne.fr/blocs/dropdownmenu-menu-actions-compact/

## L’essentiel

- children en fonction remplace désormais la prop controls historique
- onClose doit être appelé manuellement après chaque action
- toggleProps personnalise le bouton déclencheur sans changer le menu

## <DropdownMenu icon="ellipsis" label="Plus d'options" />

Cette ligne suffit à afficher un bouton discret, reconnaissable à son icône de trois points, qui ouvre un menu au clic. `DropdownMenu`, composant de `@wordpress/components`, sert précisément à cet usage : regrouper des actions secondaires d'une barre d'outils de bloc derrière un seul déclencheur, plutôt que d'aligner un bouton par action jusqu'à saturer visuellement l'espace disponible.

```
import { DropdownMenu, MenuItem } from '@wordpress/components';
import { BlockControls } from '@wordpress/block-editor';
import { ToolbarGroup } from '@wordpress/components';

function BarreOutilsBloc( { onDupliquer, onConvertir } ) {
	return (
		<BlockControls>
			<ToolbarGroup>
				<DropdownMenu icon="ellipsis" label="Plus d'options">
					{ ( { onClose } ) => (
						<>
							<MenuItem onClick={ () => { onDupliquer(); onClose(); } }>
								Dupliquer
							</MenuItem>
							<MenuItem onClick={ () => { onConvertir(); onClose(); } }>
								Convertir en paragraphe
							</MenuItem>
						</>
					) }
				</DropdownMenu>
			</ToolbarGroup>
		</BlockControls>
	);
}
```

## children en fonction : le pattern à privilégier depuis longtemps

> L'essentiel à retenir : children en fonction remplace désormais la prop controls historique ; onClose doit être appelé manuellement après chaque action ; toggleProps personnalise le bouton déclencheur sans changer le menu

`DropdownMenu` a historiquement proposé une prop `controls`, un simple tableau d'objets décrivant chaque action, plus rapide à écrire pour un menu très simple mais bien plus limité dès qu'il faut composer plusieurs `MenuGroup` ou insérer un contenu personnalisé entre les entrées. Le pattern recommandé consiste à passer une fonction en enfant du composant, qui reçoit un objet contenant notamment `onClose`, la fonction à appeler pour refermer le menu après une action.

```
{ /* Pattern historique, plus limité */ }
<DropdownMenu
	icon="ellipsis"
	label="Actions"
	controls={ [
		{ title: 'Dupliquer', onClick: onDupliquer },
		{ title: 'Supprimer', onClick: onSupprimer, isDestructive: true },
	] }
/>
```

Le pattern en fonction enfant, illustré dans le premier exemple, permet en revanche de regrouper les entrées avec `MenuGroup`, d'insérer un élément qui n'est pas un `MenuItem`, ou de composer plusieurs sections avec des libellés différents, ce que la forme tabulaire ne permet pas.

## onClose : un appel manuel après chaque action, souvent oublié

Un piège fréquent avec le pattern en fonction enfant : oublier d'appeler `onClose()` après l'exécution d'une action dans un `MenuItem`. Sans cet appel explicite, le menu reste ouvert après le clic, ce qui oblige l'utilisateur à cliquer une seconde fois en dehors du menu pour le refermer, une friction inutile pour une action pourtant déjà exécutée.

```
{ /* Incorrect : le menu reste ouvert après le clic */ }
<MenuItem onClick={ onDupliquer }>
	Dupliquer
</MenuItem>

{ /* Correct : le menu se referme après l'action */ }
<MenuItem onClick={ () => { onDupliquer(); onClose(); } }>
	Dupliquer
</MenuItem>
```

Ce détail, invisible en développement rapide où le développeur teste souvent sans vraiment observer l'état du menu après clic, se remarque immédiatement en usage réel, où chaque clic superflu compte pour l'utilisateur final.

## toggleProps : personnaliser le bouton sans toucher au contenu du menu

La prop `toggleProps` transmet des propriétés supplémentaires directement au bouton déclencheur du menu, sans affecter son contenu déplié. C'est utile pour ajuster une classe CSS, un attribut d'accessibilité additionnel, ou même désactiver temporairement le déclencheur lui-même :

```
<DropdownMenu
	icon="ellipsis"
	label="Plus d'options"
	toggleProps={ {
		className: 'mon-bouton-menu',
		disabled: enCoursDeChargement,
	} }
>
	{ ( { onClose } ) => ( /* contenu du menu */ null ) }
</DropdownMenu>
```

- désactiver le déclencheur pendant un chargement évite d'ouvrir un menu dont les actions ne seraient pas encore fiables
- une classe personnalisée via `toggleProps` reste la seule façon propre de cibler le bouton en CSS, sans dépendre d'un sélecteur générique fragile
- `toggleProps` ne s'applique jamais aux `MenuItem` internes, uniquement au bouton visible avant ouverture

> Un menu qui ne se referme jamais tout seul après une action réussie donne l'impression que rien ne s'est passé, même quand tout a fonctionné.

## Quand DropdownMenu n'est pas le bon composant

Pour une action unique, sans alternative ni variante, un simple `Button` visible directement dans la barre d'outils reste plus rapide d'accès qu'un menu à ouvrir au préalable : ajouter un clic intermédiaire pour une seule option n'apporte aucun bénéfice de clarté. À l'inverse, pour une navigation entre plusieurs pages ou étapes distinctes, un `DropdownMenu` n'est pas conçu pour cet usage : ses `MenuItem` déclenchent des actions ponctuelles, pas une navigation avec état persistant, mieux servie par des composants dédiés à la navigation.

Enfin, sur une barre d'outils déjà peu chargée, moins de quatre ou cinq boutons, regrouper artificiellement ces boutons dans un `DropdownMenu` ajoute une étape de clic sans réel gain de lisibilité : la limite se situe généralement autour de six boutons visibles simultanément.

## En résumé

`DropdownMenu` reste le composant de référence pour compresser une barre d'outils de bloc saturée, à condition d'adopter le pattern en fonction enfant plutôt que la prop `controls` historique, d'appeler systématiquement `onClose` après chaque action, et de réserver `toggleProps` à la personnalisation du seul bouton déclencheur.