# Menu
> Package `@umriss-ui/core`, version 0.40.0. Demo page: . Every page in one line: [llms.txt](https://romanhaendler.github.io/umriss-ui/core/llms.txt); every page in full: [llms-full.txt](https://romanhaendler.github.io/umriss-ui/core/llms-full.txt).
A list of actions that opens under a button (also called a dropdown menu). Reach for it when a place has more actions than room for buttons, or for the actions of each row in a list.
```ts
import { Menu, MenuItem, MenuSeparator } from "@umriss-ui/core";
```
Demo page: https://romanhaendler.github.io/umriss-ui/core/menu/
The entries are things that happen, not values that stay; choosing one runs it and closes the menu so the result is in view.
An [IconButton](https://romanhaendler.github.io/umriss-ui/core/iconbutton/) makes the trigger for a row; its label says what it acts on, such as “Actions for INC-1048”.
## Examples
### Run actions from a trigger
Give `trigger` a button and the entries as `MenuItem`; each runs its `onSelect` and the menu closes.
```tsx
import { useState } from "react";
import { Button, Menu, MenuItem, MenuSeparator, Stack, Text } from "@umriss-ui/core";
export default function Actions() {
const [last, setLast] = useState("-");
return (
Last: {last}
);
}
```
### Align with the right edge
For a trigger at the right of a header, `align` set to `end` lines the panel up with the trigger's right edge.
```tsx
import { Button, Menu, MenuItem, Stack, Text } from "@umriss-ui/core";
export default function AlignEnd() {
return (
Budget 2026 · Marketing
);
}
```
### Disable an entry, mark a destructive one
A `disabled` entry keeps its place and is skipped by the arrow keys; the `danger` tone marks what destroys, after a separator.
```tsx
import { Button, Menu, MenuItem, MenuSeparator } from "@umriss-ui/core";
export default function DisabledAndDanger() {
return (
);
}
```
### Act on a row
One menu per row keeps a list quiet; the trigger's name says which row it acts on, since every button reads the same.
```tsx
import { useState } from "react";
import { Badge, IconButton, Menu, MenuItem, MenuSeparator, Stack, Text } from "@umriss-ui/core";
interface Incident {
id: string;
title: string;
severity: "SEV1" | "SEV2" | "SEV3";
state: "open" | "acknowledged" | "resolved";
}
const INCIDENTS: Incident[] = [
{ id: "INC-1048", title: "Checkout slow, card payments time out", severity: "SEV1", state: "acknowledged" },
{ id: "INC-1047", title: "Webhook deliveries delayed", severity: "SEV3", state: "open" },
{ id: "INC-1046", title: "Thumbnails missing for new uploads", severity: "SEV2", state: "resolved" },
];
const TONE = { SEV1: "danger", SEV2: "warning", SEV3: "neutral" } as const;
export default function PerRow() {
const [incidents, setIncidents] = useState(INCIDENTS);
const set = (id: string, state: Incident["state"]) =>
setIncidents((all) => all.map((one) => (one.id === id ? { ...one, state } : one)));
return (
{incidents.map((incident) => (
{incident.severity}
{incident.id}
{" "}
{incident.title}
{incident.state}
))}
);
}
```
## When to use something else
- The user chooses a value that stays → Select
- The actions belong to a point or a row that is right-clicked → ContextMenu
- Two or three actions that fit as buttons → ButtonGroup
- Many commands across the application, found by typing → CommandPalette
## Keyboard
| Key | Action |
|---|---|
| `Enter or Space` | On the trigger, opens the menu and moves focus to the first entry; on an entry, runs it and closes the menu. |
| `↓ / ↑` | Moves to the next or previous entry, wrapping at the ends; disabled entries are skipped. |
| `Home / End` | Moves to the first or last entry. |
| `Escape` | Closes the menu and returns focus to the trigger. |
| `Tab` | Closes the menu and moves on from the trigger. |
## API
### `MenuProps`
| Prop | Type | Default | Description |
|---|---|---|---|
| `trigger` *required* | `ReactElement>` | — | Trigger, e.g. a