# Menubar

Coordinated desktop application command menus with roving triggers and shared open state.

Connect Flood once using [the installation guide](https://flood.md/docs/installation). Then import the components you use; no per-component add command is needed.

## Example

```tsx
"use client";

import { FloodRoot, Menubar } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <Menubar label="Editor commands" menus={[{id:"file",label:"File",items:[{id:"new",label:"New document"},{id:"export",label:"Export"}]},{id:"edit",label:"Edit",items:[{id:"undo",label:"Undo"},{id:"redo",label:"Redo",disabled:true}]}]} />
    </FloodRoot>
  );
}
```

## Design notes

- Arrow keys coordinate enabled menu triggers; child menus reuse Menu focus and dismissal.
- Use native links and NavigationList for destinations, not Menubar. Controlled openValue may refuse transitions.

## API reference

| Prop | Values | Default |
| --- | --- | --- |
| `label` | `string` | `Required` |
| `menus` | `readonly MenubarMenu[]` | `Required` |
| `openValue` | `string \| null` | `—` |
| `defaultOpenValue` | `string \| null` | `—` |
| `onOpenValueChange` | `(id: string \| null) => void` | `—` |
| `onAction` | `(menuId: string, actionId: string) => void` | `—` |
| `controlSize` | `"sm" \| "md" \| "lg" \| "xl"` | `—` |
| `disabled` | `boolean` | `—` |
| `Native HTML props` | `Omit<HTMLAttributes<HTMLDivElement>, "children" \| "onAction">` | `Forwarded` |