Menu

Components/Navigation

ImplementationHTML/CSS/JSArk/ZagReact · shadcn/Base UIAngular

An independent React adapter where Ark UI provides the parts and Zag maintains open state, focus, typeahead, and keyboard behavior.

DesignUsageImplementationAccessibility

Documentation sectionDesignUsageImplementationAccessibility

Design

Functional preview

Running with the independent Ark UI adapter and Zag behavior.

Loading functional preview…

Open the Ark/Zag playground

Anatomy

Rename R 2 3 Duplicate D 1

4

Delete

1 Item (.ds-menu__item) — actionable command with a required label.
2 Icon (.ds-menu__icon) — optional and decorative when text already names the action.
3 Shortcut (.ds-menu__shortcut) — optional and informational only.
4 Separator (.ds-menu__separator) — separates related action groups.

Default

Rename file R Duplicate D Download

Delete file

States and selection

Comfortable Compact Admin only

Delete view

Usage

When to use

Use Menu when

The interface needs to present commands, shortcuts, or object actions. For a complete trigger pattern, use Action Menu.

Don't use Menu when

The user is choosing a form value; use Select, Radio, or Checkbox instead. If search or text entry is required, use Combobox.

Best practices

Edit Share

Delete

Faça

Group related actions with separators; place destructive actions last.

Brazil Chile

Não faça

Don't use Menu for form value selection — use Select or Combobox.

Content guidelines

Rule	Example
Verbos de ação em sentence case	"Rename file", "Delete project"
Shortcuts apenas informativos	"R" ao lado de Rename — não substitui a ação
Destructive com linguagem clara	"Delete project" — não "Remove"

Related

Button Combobox Select Tooltip

When to choose this output

Choose this adapter in projects that adopted Ark UI and Zag as their behavioral architecture. Do not import it into the shadcn/Base UI output.

Implementation

Status

Beta

Distribution

Source adapter

Adapter source

packages/react/src/ark/menu.jsx

import {
  Menu,
  MenuContent,
  MenuItem,
  MenuTrigger,
} from '@tis/react/ark/menu'

Workspace beta

This path is a workspace contract, not a public package. No package-manager installation is advertised yet.

Accessibility

Keyboard interaction

Key	Action
Arrow Down / Arrow Up	Moves focus between items
Home / End	First / last item
Enter / Space	Activates focused item
Escape	Closes menu and returns focus to trigger

Accessibility

WCAG criterion	Requirement	Status
4.1.2 Name, Role, Value (A)	role="menu", role="menuitem", aria-haspopup, aria-expanded	✓
2.1.1 Keyboard (A)	Arrow navigation, Enter/Space, Escape via initActionMenus or equivalent	✓
2.4.3 Focus Order (A)	Initial focus on first item when open; return to trigger on close	✓

Output responsibility

Preserve the Ark/Zag semantics and validate Escape, outside interaction, ARIA relationships, and focus return.

Validation evidence

Covered by its independent Storybook output plus browser, responsive, keyboard, Axe, and bundle checks.

Open the stable reference