Dropdown Component

The dropdown component presents a menu of actions. It is an action menu, not a form select, and has matching web and mobile behavior.

component: dropdown
name: orderActions
props:
  ariaLabel: { en-US: "Order actions" }
  items:
    - label: { en-US: "Edit" }
      icon: edit
      permission: Orders/Update
      onClick:
        - dialog: { component: Orders/Edit }
    - divider: true
    - label: { en-US: "Delete" }
      icon: trash
      color: error
      isVisible: "{{ canDelete }}"
      onClick:
        - confirm: { title: { en-US: "Delete order?" } }

Props

Prop	Type	Description
`label`	localized string	Optional trigger label. When omitted, the renderer shows a 40×40 icon-only more-actions button.
`ariaLabel`	localized string	Accessible name for an icon-only trigger; defaults to `More actions`.
`icon`	string	Trigger icon. An icon-only trigger defaults to `tabler-dots-vertical`.
`items`	array	Menu items and dividers.
`items[].label`	localized string	Visible item label.
`items[].icon`	string	Optional leading item icon.
`items[].color`	string	Semantic item color; use `error` for destructive actions.
`items[].divider`	boolean	Render a separator instead of an action item.
`items[].disabled`	boolean or expression	Disable the item without hiding it.
`items[].permission`	string	Hide the item when the permission is absent.
`items[].isVisible` / `isHidden`	boolean or expression	Conditionally hide the item.
`items[].onClick`	actions	Actions run after selecting the item.

Hidden items are removed before rendering. Leading, trailing, and duplicate dividers are also removed, and the entire trigger is hidden when no actionable items remain. Web aligns icon-only menus to the trigger's right edge; mobile uses the equivalent bottom-end placement.

Props​

Props