Menu

​

What it is

A list of choices that appears anchored to a triggering element — a button, an icon, a row — and closes once a choice is made or the reader dismisses it. Titan themes only the items inside it; the surface itself renders with no visual decision recorded.

​

Live example

​

Exports

​

Choose Menu when

• A trigger opens a list of actions or choices that apply right now, and the list disappears once one is picked or the reader looks away.
• The set of options is not itself a value the reader is setting on a field — it is a set of things to do, not a value to hold.

​

Choose something else when

​

Anatomy

​

Variants, sizes, and states

Only one story is published, and it demonstrates the complete, correct trigger pattern: the trigger carries aria-controls, aria-haspopup="true", and aria-expanded, and the Menu itself receives MenuListProps={{ "aria-labelledby": <trigger id> }}. This is the pattern to copy, not just a demo — see Accessibility.

​

Edge and failure states

​

Tokens

Verified directly from Menu.overrides.ts — no per-component token emitter exists yet for this concept, so this table is hand-confirmed rather than generated. The surface itself (elevation, radius, positioning) has no entry here because none exists — it is entirely unthemed.

​

Composition

The trigger and the Menu are two separate elements a consumer wires together — there is no combined “MenuButton” export. The published pattern ties them with three ARIA attributes on the trigger and one prop on the Menu; see Accessibility for the exact shape.

​

Content

​

Accessibility

The one published story demonstrates a complete pattern, confirmed by reading the story source directly:

• Per the component’s own source documentation, onClose distinguishes escapeKeyDown, backdropClick, and tabKeyDown as separate close reasons, and a variant of selectedMenu versus menu controls where initial focus lands when the menu opens. Neither is exercised by the published story, so the described behavior is not independently confirmed here.

​

Constraints

​

Known issues

​

Why it works this way

Theming stops at the item, not the surface, because the surface has nothing to say. A menu’s shadow, radius, and position are functions of where it opens, not of what it contains — Titan records a decision at the layer that repeats (every item, every time) and leaves the layer that’s purely positional to the framework. The items’ hover and focus treatment is the one thing that would otherwise be silently inconsistent between one menu and the next.

​

Status

​

Related

• Select — for choosing and holding a value, not performing an action
• ButtonGroup — for a small set of actions that should stay visible