Skip to catalog content
Mado UI Open-code components

Source-owned · zero runtime dependencies

primitive · menu

Dropdown menu

A popover-backed menu button with complete keyboard and focus behavior.

Install with npx @madojs/ui@latest add menu.

Primitive

Dropdown menu

Invoice row actions

Keep the primary invoice link visible while grouping compact secondary commands for each responsive table row.

Open invoices
Invoice Customer Status Total Actions
INV-1002 Atlas Supply Open $8,900

No invoice action has been selected.

Composition

  • Connect a native button to a popover containing direct native links and buttons, then attach madoUiMenu().trigger and .menu refs.

Public API

export madoUiMenu()
Returns paired refs that validate and enhance one menu button relationship.
class mado-ui-menu / mado-ui-menu-item / mado-ui-menu-separator
Popover menu surface, direct items and thematic separators.
attribute aria-disabled
Marks an item unavailable while keeping helper-owned navigation consistent.
attribute data-mado-ui-menu-enhanced
Helper-owned marker while the validated menu contract is active.

Detected public classes

  • .mado-ui-menu
  • .mado-ui-menu-item
  • .mado-ui-menu-separator
  • .mado-ui-popover-invoker

Detected public CSS properties

  • --mado-ui-color-action
  • --mado-ui-color-border
  • --mado-ui-color-surface-soft
  • --mado-ui-color-text
  • --mado-ui-focus-ring
  • --mado-ui-menu-gap
  • --mado-ui-menu-inline-size
  • --mado-ui-menu-item-background
  • --mado-ui-menu-item-color
  • --mado-ui-menu-item-disabled-opacity
  • --mado-ui-menu-item-focus-background
  • --mado-ui-menu-item-gap
  • --mado-ui-menu-item-min-block-size
  • --mado-ui-menu-item-padding
  • --mado-ui-menu-item-radius
  • --mado-ui-menu-max-block-size
  • --mado-ui-menu-padding
  • --mado-ui-menu-separator-color
  • --mado-ui-menu-separator-margin
  • --mado-ui-menu-trigger-size
  • --mado-ui-popover-gap
  • --mado-ui-popover-inline-size
  • --mado-ui-popover-max-block-size
  • --mado-ui-popover-offset
  • --mado-ui-popover-padding
  • --mado-ui-popover-position-area
  • --mado-ui-radius-sm
  • --mado-ui-space-1
  • --mado-ui-space-2
  • --mado-ui-space-3

Accessibility contract

  • Enhancement adds menu/menuitem semantics only to a complete popover relationship.
  • Links remain navigation and buttons remain actions; application callbacks own outcomes and announcements.

Keyboard

  • Arrow keys, Home and End move roving focus; printable keys use typeahead; Enter and Space activate; Escape closes.

Focus

  • Opening moves focus to an enabled item; closing normally restores focus to the invoker.

Fallback

  • Without enhancement, the authored popover still contains usable native links and buttons in normal Tab order.

Installation graph

Direct dependencies

Resolved install order

Copied source

The CLI resolves each registry source path into the configured project target. Links below point to the exact catalog build tag.