Menu

Components/Navigation

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

A React source recipe with Base UI behavior and the public TIS Menu classes and tokens.

DesignUsageImplementationAccessibility

Documentation sectionDesignUsageImplementationAccessibility

Design

Functional preview

Running with the React source recipe distributed through shadcn and based on Base UI.

Loading functional preview…

Open the React · shadcn/Base UI 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

React composition

import {
  Menu,
  MenuContent,
  MenuItem,
  MenuItemText,
  MenuPortal,
  MenuPositioner,
  MenuTrigger,
  MenuTriggerIndicator,
} from "@/components/ui/menu"

<Menu>
  <MenuTrigger>
    <span className="ds-button__label">Ações</span>
    <MenuTriggerIndicator />
  </MenuTrigger>
  <MenuPortal>
    <MenuPositioner>
      <MenuContent aria-label="Ações do projeto">
        <MenuItem><MenuItemText>Editar detalhes</MenuItemText></MenuItem>
      </MenuContent>
    </MenuPositioner>
  </MenuPortal>
</Menu>

Implementation

Status

Beta

Distribution

Source via shadcn

Installation

Configure the namespace once in the React integration guide.

npm

npx shadcn@latest add @tis/menu

pnpm

pnpm dlx shadcn@latest add @tis/menu

yarn

yarn dlx shadcn@latest add @tis/menu

bun

bunx --bun shadcn@latest add @tis/menu

Public contract

Registry item

@tis/menu

Provider

Base UI

Distribution

Source copied into the application

Status

Beta

Technical architecture

Open registry JSON

Inspect distributed source

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 Base UI semantics and test real content, focus visibility, and accessible names in the consuming application.

Validation evidence

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

Open the stable reference