Components / Dropdown Menu

Dropdown Menu

A button-triggered menu of application actions with roving focus.

example.component.html

html

<aevko-dropdown-menu label="Account actions">
  <button aevkoDropdownMenuTrigger>
    Open
  </button>
  <button aevkoDropdownMenuItem>
    Profile
  </button>
  <button aevkoDropdownMenuItem>
    Billing
  </button>
</aevko-dropdown-menu>

Installation

npx aevko-ui@latest add dropdown-menu --yes

Source ownership

Customization

Project native action buttons, bind open only when coordinating state and edit the local surface for groups, shortcuts or destructive treatments.

Edit locallyThe installed template and stylesheet are application code, not a black box.

Theme semanticallyOverride --aevko-* tokens or ordinary classes without !important.

Compose freelySlots accept native elements, SVG, images or Angular components.

API reference

Property or slot	Type	Default	Description
`label / id`	`string`	`required / generated default`	Accessible menu name and trigger relationship.
`open`	`model<boolean>`	`false`	Controlled menu state.
`align`	`'start' \| 'end'`	`'start'`	Popup alignment.
`trigger / item`	`projected directives`	`required`	Native trigger and action buttons.

Accessibility contract

Accessibility

Included behavior

The trigger exposes menu state; Arrow keys, Home, End and Escape operate native menu items.

Your responsibility

Use native buttons for actions, links for navigation and concise labels that remain clear without icons or shortcuts.

Back to all components