Composant · Navigation
Menu
StableListe verticale d'actions (role="menu") avec icônes Lucide optionnelles, groupes titrés, séparateurs et items destructifs ou désactivés. Le surface visuelle est partagée avec MenuPopover ; pour ancrer le menu à un déclencheur flottant, combinez les deux.
Voir le code (Svelte)
<Menu
label="Actions"
items={[{"value":"edit","label":"Modifier","icon":"✎"},{"value":"duplicate","label":"Dupliquer","icon":"⎘"},{"kind":"divider"},{"value":"delete","label":"Supprimer","danger":true,"icon":"✕"}]}
/>Quand l'utiliser
- Regrouper des actions sur un objet (éditer, dupliquer, partager, supprimer).
- Structurer ces actions par groupes et séparateurs pour les hiérarchiser.
- Pour sélectionner une valeur (et non lancer une action), utilisez Dropdown.
Quand ne pas l'utiliser
- Pour une navigation principale persistante : utilisez SideNav ou Tabs.
- Pour un seul bouton d'action : un Button suffit.
- Pour un menu de débordement compact en bout de ligne : utilisez OverflowMenu.
Groupes, séparateurs et item destructif
Les items group titrent des sections, divider les sépare, et danger colore une action destructive.
Groupes, séparateurs et item destructif
Voir le code (Svelte)
<Menu
label="Actions"
items={[{"kind":"group","label":"Édition"},{"label":"Éditer","value":"edit","icon":"✎"},{"label":"Dupliquer","value":"duplicate","icon":"⎘"},{"kind":"divider"},{"kind":"group","label":"Distribuer"},{"label":"Partager","value":"share","icon":"↗"},{"label":"Archiver","value":"archive","icon":"⊟"},{"kind":"divider"},{"label":"Supprimer","value":"delete","danger":true,"icon":"✕"}]}
/>États des items et densité
Un item peut être désactivé (non sélectionnable) ou destructif. La prop dense réduit la hauteur des items.
États des items et densité
Voir le code (Svelte)
<Menu
label="États"
items={[{"label":"Action normale","value":"normal"},{"label":"Action désactivée","value":"disabled","disabled":true},{"kind":"divider"},{"label":"Action destructive","value":"destroy","danger":true}]}
/>
<Menu
label="Dense"
dense
items={[{"label":"Action normale","value":"normal"},{"label":"Action désactivée","value":"disabled","disabled":true},{"kind":"divider"},{"label":"Action destructive","value":"destroy","danger":true}]}
/>Anatomie
- Conteneur (.st-menu, role="menu") : surface avec min 12 rem / max 18 rem de large.
- Item (.st-menu__item, role="menuitem") : bouton avec icône optionnelle et libellé.
- Groupe (.st-menu__group) : titre de section en petites capitales.
- Séparateur (.st-menu__divider, role="separator") : filet horizontal.
Accessibilité
- Le conteneur a role="menu" et un aria-label fourni par label.
- Chaque action a role="menuitem" ; les items désactivés portent aria-disabled.
- Navigation clavier : fleches haut/bas pour parcourir, Home/End pour aller aux bornes, Enter/Espace pour activer.
- Avec dismissOnSelect, Escape et le clic extérieur ferment le menu.
- Les groupes et séparateurs sont décoratifs (presentation / aria-hidden).
Lignes directrices
À faire
- Placer l'action destructive en bas, isolée par un séparateur.
- Utiliser des verbes d'action concis pour chaque item.
À éviter
- Multiplier les items au-delà de ce qui se lit en un coup d'œil.
- Mélanger actions et choix de valeurs dans le même menu.
API
| Prop | Type | Défaut | Description |
|---|---|---|---|
label | string | requis | aria-label du menu. |
items | MenuItem[] | requis | Actions, groupes et séparateurs. |
open | boolean (bindable) | true | Affiche le menu. |
dismissOnSelect | boolean | false | Ferme le menu après sélection ; active Escape et clic extérieur. |
dense | boolean | false | Réduit la hauteur des items. |
onselect | (value: string) => void | optionnel | Appelé avec la valeur de l'item choisi. |
class | string | optionnel | Classe(s) sur le conteneur. |
| Autres attributs | HTMLAttributes<HTMLDivElement> | N/A | Propagés sur le <div> conteneur. |
Un item (MenuActionItem) accepte : label, value, icon?, disabled?, danger?. Un MenuGroupItem porte kind: "group" et label ; un MenuDividerItem porte kind: "divider".
Tokens utilisés
--st-component-menu-background--st-component-menu-border--st-component-menu-radius--st-component-menu-text--st-component-menu-shadow--st-component-menu-minWidth--st-component-menu-maxWidth--st-component-menu-itemHoverBackground--st-component-menu-disabledText--st-component-menu-dangerText--st-component-menu-dangerHoverBackground--st-component-menu-groupText--st-component-control-hoverBorder--st-component-control-hoverBackground