Menu

Components/Navigation

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

Standalone directives over Angular Aria with roving focus, typeahead, commands, and radio/checkbox choices.

DesignUsageImplementationAccessibility

Documentation sectionDesignUsageImplementationAccessibility

Design

Functional preview

Running with the native Angular component and @angular/aria/menu.

Loading functional preview…

Open the Angular 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 native Angular output when the application already uses Angular. It consumes the same DS CSS and has no dependency on the Web runtime or React adapters.

Implementation

Status

Beta

Distribution

Validated Angular tarball

Installation

npm

npm install ./dist/tis-angular-0.0.0-beta.0.tgz ds-tis

pnpm

pnpm add ./dist/tis-angular-0.0.0-beta.0.tgz ds-tis

yarn

yarn add ./dist/tis-angular-0.0.0-beta.0.tgz ds-tis

bun

bun add ./dist/tis-angular-0.0.0-beta.0.tgz ds-tis

Validated workspace beta

The command installs the locally generated and consumer-tested tarball. @tis/angular is not published on the public npm registry.

DS styles

@import "ds-tis/css";

Angular imports

import {
  TisActionMenu,
  TisMenu,
  TisMenuItem,
  TisMenuItemLabel,
  TisMenuTrigger,
} from '@tis/angular/menu'

Template

<div tisActionMenu align="start">
  <button tisMenuTrigger [menu]="menu.primitive">
    <span class="ds-button__label">Ações do projeto</span>
  </button>
  <div tisMenu #menu="tisMenu" aria-label="Ações do projeto">
    <button tisMenuItem value="edit" searchTerm="Editar">
      <span tisMenuItemLabel>Editar detalhes</span>
    </button>
  </div>
</div>

Public contract

Package

@tis/angular

Entrypoint

@tis/angular/menu

Primitive

@angular/aria/menu

Status

Beta

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 native button semantics, submit behavior, accessible names, disabled state, and visible focus.

Validation evidence

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

Open the stable reference