Composant · Navigation

OverflowMenu

Stable

Menu d’actions secondaires ouvert via un déclencheur compact (icône `Ellipsis`). Les items typés couvrent actions, séparateurs et libellés de groupe ; le placement contrôle la direction d’ouverture.

Voir le code (Svelte)

<OverflowMenu
  label="⋮"
  open
  placement="bottom-start"
  items={[{"id":"rename","label":"Renommer"},{"id":"move","label":"Déplacer"},{"id":"delete","label":"Supprimer"}]}
/>

Exemples

Dernière action sélectionnée : N/A

API

Prop	Type	Default
`items`	`OverflowMenuItem[]`	requis
`label`	`string`	`"Menu"`
`open`	`boolean` (`$bindable`)	`false`
`placement`	`"bottom-start" \| "bottom-end" \| "top-start" \| "top-end"`	`"bottom-end"`
`triggerLabel`	`string`	`"More actions"`
`dense`	`boolean`	`false`
`onselect`	`(value: string) => void`	optionnel
`class`	`string`	optionnel
+ attributs HTMLDivElement transmis (...rest)

OverflowMenuItem

Variante (kind)	Champs
`"item"` (défaut)	`value`, `label`, `disabled?`, `danger?`, `icon?`, `onclick?`
`"divider"`	N/A
`"group"`	`label`

Notes d’usage

`items` est une union discriminée par `kind` : `"item"` (défaut), `"divider"` et `"group"`. Un item action porte `value`, `label`, et optionnellement `icon`, `disabled`, `danger`, `onclick`.

Quand le déclencheur est à gauche, préférez `placement="bottom-start"` pour que la liste s’ouvre vers la droite (alignée à gauche du déclencheur). `bottom-end` (défaut) aligne la liste à droite.

Le menu se ferme sur Escape et sur pointerdown extérieur (géré via `svelte:window`). `onselect` reçoit la `value` de l’item, après l’`onclick` de l’item.

Navigation clavier : Enter/Espace/ArrowDown ouvre et focus le premier item; puis flèches Haut/Bas, Home/End et Enter/Espace pour naviguer/activer; les items désactivés sont ignorés.

Tokens utilisés

--st-component-overflowMenu-triggerRadius
--st-component-overflowMenu-triggerText
--st-component-overflowMenu-triggerHoverBackground
--st-component-overflowMenu-dangerText
--st-component-overflowMenu-dangerHoverBackground
--st-component-overflowMenu-dangerHoverText
--st-component-menu-background
--st-component-menu-border
--st-component-menu-radius
--st-component-menu-shadow
--st-component-menu-minWidth
--st-component-menu-maxWidth
--st-component-menu-text
--st-component-menu-itemHoverBackground
--st-component-menu-disabledText
--st-component-menu-groupText
--st-component-control-focusRing
--st-component-popover-zIndex
--st-semantic-text-primary
--st-semantic-surface-subtle
--st-semantic-surface-raised
--st-semantic-border-subtle
--st-semantic-feedback-error
--st-semantic-action-primaryText
--st-spacing-1
--st-spacing-2
--st-spacing-3
--st-radius-small
--st-component-control-hoverBorder
--st-component-control-hoverBackground