Actions

More menu

The rest of a row's actions, behind one button. Dangerous ones confirm.

openvibe-shared/kitJSON

Build it

kit.more({ label: 'More', items: [{ href: '/r/night-owls/edit', label: 'Edit the room', icon: 'pencil' }, { href: '/r/night-owls/invite', label: 'Invite', icon: 'invite' }, { action: '/r/night-owls/delete', label: 'Delete the room', icon: 'trash', danger: true, confirm: 'Delete Night owls for everyone?' }] })

Props

icon
string?
items
list?
label
string?

Anatomy

  • moreThe rest of a row's actions, behind one button. Dangerous ones confirm.

Behaviour and access

Keyboard
Keeps the focused control in view
Outside tap
Leaves it open
Scroll
The page still scrolls
Reduced motion
Remove movement; keep the state change.
Name
More menu
Target
At least 44 × 44 px on touch
Focus
Visible keyboard focus; follow reading order

States

  • default
  • closed
  • open

Tokens

  • color.accent.strong
  • size.tap

Android · Jetpack Compose

Material 3 More menu

Use More menu in Jetpack Compose with the shared tokens.

iOS · SwiftUI

Use More menu in SwiftUI with the shared tokens.

Markup

Default

<details class="ovk-more"><summary class="ovk-icon-btn" aria-label="More" title="More"><svg class="ovk-i" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><circle cx="5" cy="12" r="1.6"/><circle cx="12" cy="12" r="1.6"/><circle cx="19" cy="12" r="1.6"/></svg></summary><div class="ovk-pop" role="menu"><a class="ovk-pop-item" role="menuitem" href="/r/night-owls/edit"><svg class="ovk-i" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg><span>Edit the room</span></a><a class="ovk-pop-item" role="menuitem" href="/r/night-owls/invite"><svg class="ovk-i" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><circle cx="9" cy="8" r="3.2"/><path d="M3 20c0-3.3 2.7-5.5 6-5.5s6 2.2 6 5.5M19 8v6M16 11h6"/></svg><span>Invite</span></a><form method="post" action="/r/night-owls/delete" data-ovk-confirm="Delete Night owls for everyone?"><button type="submit" class="ovk-pop-item ovk-pop-item--danger" role="menuitem"><svg class="ovk-i" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M4 7h16M10 11v6M14 11v6M6 7l1 12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-12M9 7V4h6v3"/></svg><span>Delete the room</span></button></form></div></details>