Overlays

Dropdown Menu

Popover-anchored menu with shortcuts; open, Escape and light dismiss are native, initDropdownMenu adds the arrow keys and close-on-select.

Element: <menu>
Module: @basenative/components
Function: renderDropdownMenu

Quick start

Import the render function and call it from your server template.

import { renderDropdownMenu } from '@basenative/components';

renderDropdownMenu({ trigger: 'Actions', items: [{ label: 'Edit', action: 'edit' }] });

Examples

Each block is a real server render — no mockups, no virtual DOM.

Action menu

Built on the Popover API and anchored to its trigger; arrow keys move between items and choosing one closes the menu.

Live render

Source

renderDropdownMenu({
  trigger: 'Actions',
  items: [
    { label: 'Edit', action: 'edit', icon: '✏️' },
    { label: 'Duplicate', action: 'duplicate', icon: '📋' },
    { separator: true },
    { label: 'Delete', action: 'delete', icon: '🗑️' },
  ],
})

Options

Arguments accepted by renderDropdownMenu().

renderDropdownMenu option reference
Option	Type	Default	Description
`trigger`	`string`	`—`	Trigger button label.
`items`	`{ label, action, icon?, separator? }[]`	`—`	Menu items.