# Menubar

> A horizontal row of top-level triggers modeled on a native application's menu bar, where each trigger opens its own dropdown built from the existing Menu component.

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

Renders the row's host: a native `<div>` carrying the `menubar` role for
Menubar.Triggers. In dev mode, a root missing an `aria-label` or
`aria-labelledby` logs a `console.warn`.

## Examples

```tsx
<Menubar aria-label={t("app.menubar")}>
	<Menubar.Trigger commandfor="file-menu">{t("menubar.file")}</Menubar.Trigger>
	<Menu id="file-menu" aria-label={t("menubar.fileMenu")}>
		<Menu.Item>{t("actions.new")}</Menu.Item>
		<Menu.Item>{t("actions.open")}</Menu.Item>
	</Menu>

	<Menubar.Trigger commandfor="edit-menu">{t("menubar.edit")}</Menubar.Trigger>
	<Menu id="edit-menu" aria-label={t("menubar.editMenu")}>
		<Menu.Item>{t("actions.undo")}</Menu.Item>
		<Menu.Item>{t("actions.redo")}</Menu.Item>
	</Menu>
</Menubar>
```

## Props

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


### Menubar.Trigger

Renders a single top-level trigger: a native `<button>` pointed at the `id` of the Menu it opens through `commandfor`, with `command` defaulting to `"toggle-popover"` and `role` to `"menuitem"`.

| Prop | Type | Description |
| --- | --- | --- |
| `commandfor` | `string` | `id` of the Menu this trigger opens. |

Also accepts everything in `Omit<TagProps<"button">, "commandfor">`.