Wildeye Design System
CtrlK
Home page

Icon menu

A menu hung off one icon button, for the actions on a table or list row.

Refined portVue source: WildIconMenu.vueReact component: WIconMenu, KebabGlyph

Try it

Open it with a click or the arrow keys, then pick an action.

Nothing picked yet
Size
Row icons
Disabled
<WildIconMenu
  name="kebab"
  aria-label="Actions for Alarm 1"
  size="md"
  :options="alarmActions"
  @select="onAction"
/>

When to use

  • Use it for the actions on one row of a table or list, such as an alarm.
  • Use it where a row has no room for labelled buttons.
Don’t use it
  • For the main action on a page. Use a Button.
  • For one or two actions. Show them as Icon buttons.
  • To choose a value. Use a Select.

Anatomy

An icon button and a dropdown menu. The menu opens 6px below, aligned to the trigger’s right edge.

Edit
History
Delete
open
The trigger keeps its pressed look while the menu is open. Near the bottom of the window the menu opens above instead.

Sizes

Three square triggers. The default is md, at 28px.

sm · 24
md · 28
lg · 32

Content

  • Keep each action to a word or two: Edit, History, Delete.
  • Name the object only when the action alone is ambiguous.
  • Put destructive actions last.
  • Name the row in the trigger’s label: Actions for Alarm 1.

Accessibility

The trigger is a menu button, so a screen reader hears its label and that it opens a menu. Pass ariaLabel.

KeyWhat it does
Enter / SpaceOn the trigger, opens the menu on the first action. On an action, runs it.
Down / Up arrowOn the trigger, opens on the first or last action. In the menu, moves between actions.
Home / EndMoves to the first or last action.
A letterMoves to the next action starting with it.
EscapeCloses the menu and returns focus to the trigger.
TabCloses the menu and moves on.

Props

PropTypeDefaultDescription
namestring—Trigger icon name. Use a kebab for row actions.
options{ Id, Name, Icon? }[][]The actions, in order. The refined menu adds Destructive and Disabled.
ariaLabelstring'Menu'Accessible name for the trigger.
size'sm' | 'md' | 'lg''md'Trigger size: 24, 28 or 32px.
iconClassstring'h-4 w-4 …'Classes on the trigger icon: 16px, grey.
disabledbooleanfalseBlocks the trigger, so the menu never opens.
menuClassstring'w-44'Menu width. The default is 176px.
portalbooleantrueRenders the menu on the body, above clipping tables.
@select(option) => void—Fires with the picked action.
@open-change(open: boolean) => void—Fires when the menu opens or closes.

Tokens

TokenValueWhere it lands
--global-neutral-grey-900#7F7D83Trigger icon at rest.
--global-neutral-grey-1200#1D1C20Trigger icon on hover.
--global-neutral-grey-300#F1F1F1Trigger and row hover.
--global-neutral-grey-400#ECECEDTrigger ground while pressed or open.
--global-neutral-grey-800#ADACB0Disabled trigger icon and row text.
--global-blue-1000#1877F2Trigger icon while open; focus ring.
--global-neutral-grey-500#E6E6E6Menu border.
--global-cool-grey-1200#24262BAction text.
--global-cool-grey-900#595E6ARow icons.
--global-red-900#BC1C1CDestructive action text.
--global-red-100#FEEBEBDestructive row hover.
--shadow-dropdown0 4px 12pxMenu elevation.