Menu

Components/Navigation

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

Offers a short list of contextual commands from a Button.

DesignUsageImplementationAccessibility

Documentation sectionDesignUsageImplementationAccessibility

Design

Functional preview

Running with the stable ds-tis/menu JavaScript runtime.

Loading functional preview…

Open the HTML/CSS/JS 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

Implementation

Status

Stable

Distribution

npm package

Installation

npm

npm install ds-tis

pnpm

pnpm add ds-tis

yarn

yarn add ds-tis

bun

bun add ds-tis

Imports

import 'ds-tis/css'
import { initActionMenus } from 'ds-tis/menu'

initActionMenus()

Markup

<div class="ds-action-menu">
  <button class="ds-button ds-button--outline ds-action-menu__trigger" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="project-menu">
    <span class="ds-button__label">Ações do projeto</span>
  </button>
  <div class="ds-menu ds-action-menu__content" id="project-menu" role="menu">
    <button class="ds-menu__item" role="menuitem" type="button">
      <span class="ds-menu__item-label">Editar detalhes</span>
    </button>
  </div>
</div>

Web implementation contract

Action Menu

Action Menu combines a Button trigger with a positioned Menu. The public ds-tis/menu module (initActionMenus / destroyActionMenus) is required for the interactive contract: open/close, Escape, arrow keys, typeahead, and focus return. Events: ds-menu-open, ds-menu-close.

Project actions

Edit details Duplicate project

Delete project

Token mapping

Parte	CSS	Token
Surface	.ds-menu	component.menu.surface.*
Item	.ds-menu__item	component.menu.item.{height,gap,padding-x,radius,bg,content}
Destructive	.ds-menu__item--destructive	component.menu.item.{content,icon,meta}.color.destructive
Icon	.ds-menu__icon	component.menu.item.icon.{color,size,stroke-width}
Overlay gap	.ds-action-menu__content	component.action-menu.overlay.gap.default

CSS classes

Class	Description
ds-menu	Menu container (role="menu")
ds-menu__item	Command item
ds-menu__item--destructive	Destructive action
ds-menu__separator	Group separator
ds-action-menu	Trigger + popup wrapper
ds-action-menu__trigger	Button that opens the menu
ds-action-menu__content	Positioned menu in overlay

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

Initialize the public runtime after render and destroy it when the owning view unmounts.

Validation evidence

Covered by the stable Storybook, public runtime tests when applicable, keyboard scenarios, responsive checks, and Axe.

Open the stable reference