# Menu

> A menu surface anchored to whatever invoker opens it, riding the same native Popover API Popover does, sized to its own content and padded around a compact stack of Menu.Item rows, Menu.Separator dividers, or a `Section`/`Header` pair grouping related rows together.

```ts
import { Menu } from "@sdxc/ui";
```

Renders the menu's own host: a Popover defaulting to
`"bottom-start"` placement and `"menu"` role, sized to its content. Point a
row's `commandfor` at another `<Menu>`'s `id` to open it as a nested menu.

## Examples

```tsx
<Button commandfor="account-menu" command="toggle-popover">{t("nav.account")}</Button>
<Menu id="account-menu" aria-label={t("nav.accountMenu")}>
	<Menu.Item href="/settings/profile">{t("nav.profile")}</Menu.Item>
	<Menu.Item href="/settings/billing">{t("nav.billing")}</Menu.Item>
	<Menu.Separator />
	<Menu.Item danger>{t("actions.signOut")}</Menu.Item>
</Menu>
```

```tsx
<Menu id="row-menu" placement="left-start" aria-label={t("table.rowActions")}>
	<Section aria-labelledby="row-menu-view-heading">
		<Header id="row-menu-view-heading">{t("menu.view")}</Header>
		<Menu.Item href={viewUrl}>{t("actions.view")}</Menu.Item>
		<Menu.Item href={editUrl}>{t("actions.edit")}</Menu.Item>
	</Section>
	<Menu.Separator />
	<Menu.Item danger commandfor="confirm-delete" command="show-modal">{t("actions.delete")}</Menu.Item>
</Menu>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `children` | `RemixNode` | The menu's rows: Menu.Item, Menu.Separator, or a `Section`/`Header` pair grouping related items together. |

Also accepts everything in `Popover.Props`.


### Menu.Item

Renders a native `<a>` when `href` is set, else a `<button>`, defaulting `role` to `"menuitem"`; only omitting or neutralizing `href` stops the `<a>` variant's navigation, since `aria-disabled` mutes it visually only.

| Prop | Type | Description |
| --- | --- | --- |
| `href?` | `string` | Destination the row navigates to. Renders the row as a native `<a>` instead of a `<button>` when set. |
| `target?` | `TagProps<"a">["target"]` | `target` for the link variant, applied only once `href` is set. |
| `rel?` | `TagProps<"a">["rel"]` | `rel` for the link variant, applied only once `href` is set. |
| `danger?` | `boolean` | Styles the row in the semantic danger tone, for a destructive action like deleting a resource. |
| `mix?` | `MixinDescriptor<HTMLAnchorElement \| HTMLButtonElement, any, ElementProps>[]` | Extra mixin(s) applied to the row's host element, whichever of `<a>`/`<button>` it renders as depending on href. |

Also accepts everything in `TagProps<"button">`.


### Menu.Separator

Renders a hairline divider between two runs of Menu.Items: the shared Separator component with the small block-axis margin a menu's compact rows need on either side of it.

Also accepts everything in `Separator.Props`.