Dropdown Menu — ARC UI

Components

Dropdown Menu

feedback

interactive

<arc-dropdown-menu>

Overview

Guidelines

When to use

Provide a clear, descriptive trigger element -- a button with text like "Actions" or a recognizable icon
Group related items with <arc-menu-divider> to create visual sections within the menu
Include shortcut hints on items that have associated keyboard bindings for user education
Listen to arc-select to execute the chosen action; the event contains the item label and shortcut
Keep the item count under 10; for larger command sets, use CommandPalette instead

When not to use

Use DropdownMenu as a form Select replacement -- it does not track a selected value
Place the trigger element outside the <arc-dropdown-menu> component; it must be in the trigger slot
Nest another DropdownMenu inside a menu item; use a flat list or CommandPalette for complex hierarchies
Forget to add role="menu" semantics -- the component handles this automatically
Override the z-index of the panel without testing stacking context conflicts with other overlays

Features

Click-triggered panel anchored below a customizable trigger slot
Smooth CSS transition with opacity, visibility, and translateY animation
Full keyboard navigation: ArrowUp/Down cycle items, Enter selects, Escape closes
Support for <arc-menu-item> with label and shortcut hint, and <arc-menu-divider> for grouping
arc-select event on item activation with label and shortcut in the detail
arc-close event when the panel is dismissed by any means
Automatic close on outside click via a document-level event listener
aria-haspopup and aria-expanded on the trigger for screen reader accessibility

Preview

Actions

Usage

This component requires JavaScript. No pure HTML/CSS version is available — use the Web Component directly or a framework wrapper.

<arc-dropdown-menu>
  <button slot="trigger">File Menu</button>
  <arc-menu-item shortcut="⌘N">New File</arc-menu-item>
  <arc-menu-item shortcut="⌘O">Open</arc-menu-item>
  <arc-menu-item shortcut="⌘S">Save</arc-menu-item>
</arc-dropdown-menu>

import { DropdownMenu, MenuItem } from '@arclux/arc-ui-react';

<DropdownMenu>
  <button slot="trigger">File Menu</button>
  <MenuItem shortcut="⌘N">New File</MenuItem>
  <MenuItem shortcut="⌘O">Open</MenuItem>
  <MenuItem shortcut="⌘S">Save</MenuItem>
</DropdownMenu>

<script setup>
import { DropdownMenu, MenuItem } from '@arclux/arc-ui-vue';
</script>

<template>
  <DropdownMenu>
    <button slot="trigger">File Menu</button>
    <MenuItem shortcut="⌘N">New File</MenuItem>
    <MenuItem shortcut="⌘O">Open</MenuItem>
    <MenuItem shortcut="⌘S">Save</MenuItem>
  </DropdownMenu>
</template>

<script>
  import { DropdownMenu, MenuItem } from '@arclux/arc-ui-svelte';
</script>

<DropdownMenu>
  <button slot="trigger">File Menu</button>
  <MenuItem shortcut="⌘N">New File</MenuItem>
  <MenuItem shortcut="⌘O">Open</MenuItem>
  <MenuItem shortcut="⌘S">Save</MenuItem>
</DropdownMenu>

import { Component } from '@angular/core';
import { DropdownMenu, MenuItem } from '@arclux/arc-ui-angular';

@Component({
  imports: [DropdownMenu, MenuItem],
  template: `
    <DropdownMenu>
      <button slot="trigger">File Menu</button>
      <MenuItem shortcut="⌘N">New File</MenuItem>
      <MenuItem shortcut="⌘O">Open</MenuItem>
      <MenuItem shortcut="⌘S">Save</MenuItem>
    </DropdownMenu>
  `,
})
export class MyComponent {}

import { DropdownMenu, MenuItem } from '@arclux/arc-ui-solid';

<DropdownMenu>
  <button slot="trigger">File Menu</button>
  <MenuItem shortcut="⌘N">New File</MenuItem>
  <MenuItem shortcut="⌘O">Open</MenuItem>
  <MenuItem shortcut="⌘S">Save</MenuItem>
</DropdownMenu>

import { DropdownMenu, MenuItem } from '@arclux/arc-ui-preact';

<DropdownMenu>
  <button slot="trigger">File Menu</button>
  <MenuItem shortcut="⌘N">New File</MenuItem>
  <MenuItem shortcut="⌘O">Open</MenuItem>
  <MenuItem shortcut="⌘S">Save</MenuItem>
</DropdownMenu>

API

Prop	Type	Default	Description
`open`	`boolean`	`false`	Controls whether the menu panel is visible. Toggled by clicking the trigger. Set to false when the user selects an item, clicks outside, or presses Escape.

Events

Event	Description
`arc-close`	Fired when the dropdown closes
`arc-select`	Fired when a menu item is selected

MenuItem

<arc-menu-item>

A single action entry inside the context menu.

Prop	Type	Default	Description
`label`	`string`	—	Display text for the menu item.
`shortcut`	`string`	—	Keyboard shortcut hint displayed on the right side.
`icon`	`string`	—	Name of the icon to display before the label.
`disabled`	`boolean`	`false`	Disables the item, preventing interaction.

MenuDivider

<arc-menu-divider>

A visual separator between groups of menu items.