menu-item

inside menu

One action in a menu's list.

Spec · edit me

No problems. The parser accepted every line.

Result · try itOpen in playground

Tweak the props"text"icon

tone

Props

"text"textWhat it does, e.g. Duplicate.required

onactionWhat happens when it's chosen, e.g. emit:duplicate or set:confirm:true. Separate several with ;required

iconstringAn icon before the text, by name from icon's list, e.g. icon=check-circle.—

tonedefault · badbad for an action that removes or can't be undone, drawn in the bad color.default

disabledconditionWhen true, it's shown but can't be chosen.—

ifconditionShow only when this expression is true, e.g. if=done or if={count>0}. Every element takes it.—

tipstringA short explanation shown on hover, keyboard focus or a tap, e.g. tip="Orders not yet shipped": for a term or a number some people won't know, instead of more words on screen. It makes the element a Tab stop if it isn't one. Every element takes it.—

Only inside: menu

For your model

The exact guide entry a model gets for menu-item, generated from the same definition.

  menu-item "<text>"  — One action in a menu's list.
    "<text>" (required)  What it does, e.g. Duplicate.
    on=<action, required>  What happens when it's chosen, e.g. emit:duplicate or set:confirm:true. Separate several with ;
    icon=<string>  An icon before the text, by name from icon's list, e.g. icon=check-circle.
    tone=<default|bad>  bad for an action that removes or can't be undone, drawn in the bad color.
    disabled=<condition>  When true, it's shown but can't be chosen.
    only inside: menu
    example:
      menu-item "Duplicate" icon=copy on=emit:duplicate

  menu "<text>"  — A button that opens a short list of actions, for what can be done to one item (edit, duplicate, delete) without a row of buttons. Each menu-item runs its own on=.
    "<text>"  The button's words, e.g. Actions. Leave it out for a small ⋯ button.
    label=<string>  What a screen reader calls a ⋯ button with no text, e.g. label="Order actions". Default: More actions.
    variant=<secondary|primary>  secondary (outlined) or primary (filled).
    disabled=<condition>  When true, it can't be opened.
    align=<start|end>  Where it sits in its room: start, or end (the right). Default: end for a ⋯ menu, start for one with words.
    children: menu-item
    example:
      menu "Actions"
        menu-item "Edit" icon=file on=emit:edit
        menu-item "Duplicate" icon=copy on=emit:duplicate
        menu-item "Delete" icon=x-circle tone=bad on=emit:delete

More input

button link check switch radio select date-picker stepper slider input segmented menu

All input elements on one page →