Composant · Navigation

MenuTriggerButton

Stable

Bouton icône carré préconfiguré pour ouvrir un menu, avec aria-haspopup et aria-expanded câblés, et chevron Lucide par défaut.

Exemples

Default chevron icon

Voir le code (Svelte)

<MenuTriggerButton aria-label="Ouvrir le menu" expanded={false} open={false}>⌄</MenuTriggerButton>

Custom icon

Voir le code (Svelte)

<MenuTriggerButton aria-label="Plus d'options">⋯</MenuTriggerButton>
<MenuTriggerButton aria-label="Autres actions">⋯</MenuTriggerButton>
<MenuTriggerButton aria-label="Paramètres" variant="secondary">⚙</MenuTriggerButton>

Tailles

Voir le code (Svelte)

<MenuTriggerButton aria-label="Petit" size="sm">⌄</MenuTriggerButton>
<MenuTriggerButton aria-label="Moyen" size="md">⌄</MenuTriggerButton>
<MenuTriggerButton aria-label="Grand" size="lg">⌄</MenuTriggerButton>

États

Voir le code (Svelte)

<MenuTriggerButton aria-label="Ouvert" expanded open variant="secondary">⌄</MenuTriggerButton>
<MenuTriggerButton aria-label="Désactivé" disabled>⌄</MenuTriggerButton>

L'état ouvert (expanded en Svelte, open en React/Vue) est figé pour la démonstration. Passez une icône en enfant pour remplacer le chevron par défaut.

API

Prop	Type	Default
`aria-label`	`string`	required
`expanded`	`boolean`	`false`
`aria-controls`	`string`	optionnel
`size`	`"sm" \| "md" \| "lg"`	`"md"`
`variant`	`"ghost" \| "secondary"`	`"ghost"`
`disabled`	`boolean`	`false`

Le composant câble automatiquement aria-haspopup="menu" et aria-expanded. Passe une icône Lucide en enfant pour remplacer le chevron par défaut.