laif-ds/dist/agent-docs/components/Menubar.md

Design System di Laif con componenti React basati su principi di Atomic Design

# Menubar

## Overview

Top-level horizontal application menu built on Radix Menubar. Supports nested submenus, checkbox and radio items, separators, and keyboard navigation.

---

## Subcomponents & Props

- **Menubar**: Root container. Extends `@radix-ui/react-menubar` Root props.
- **MenubarMenu**: Wraps a single menu.
- **MenubarTrigger**: Button that opens its menu.
- **MenubarContent**: The floating panel with items.
  - `align`: `start | center | end` (default `start`)
  - `alignOffset`: `number` (default `-4`)
  - `sideOffset`: `number` (default `8`)
- **MenubarItem**: Clickable action item.
  - `variant`: `"default" | "destructive"` (default `"default"`)
  - `inset`: `boolean` (indent the item)
- **MenubarCheckboxItem**: Checkbox item.
  - `checked`: `boolean`
- **MenubarRadioGroup**: Groups radio items.
  - `value`, `onValueChange`: controlled selection
- **MenubarRadioItem**: Radio item in a group.
- **MenubarLabel**: Non-interactive label.
- **MenubarSeparator**: Horizontal separator.
- **MenubarShortcut**: Right-aligned keyboard shortcut hint.
- **MenubarSub / MenubarSubTrigger / MenubarSubContent**: Submenu primitives.

---

## Behavior

- **Keyboard navigation**: Arrow keys to move between triggers and items, Enter/Space to select.
- **States**: Triggers reflect open/focus states. `variant="destructive"` styles an item for dangerous actions.
- **Accessibility**: Proper roles and aria attributes via Radix primitives.

---

## Examples

### Basic

```tsx
import {
  Menubar,
  MenubarMenu,
  MenubarTrigger,
  MenubarContent,
  MenubarItem,
  MenubarSeparator,
  MenubarSub,
  MenubarSubTrigger,
  MenubarSubContent,
  MenubarShortcut,
} from "laif-ds";

export function BasicMenubar() {
  return (
    <Menubar>
      <MenubarMenu>
        <MenubarTrigger>File</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>
            New Tab <MenubarShortcut>⌘T</MenubarShortcut>
          </MenubarItem>
          <MenubarItem>
            New Window <MenubarShortcut>⌘N</MenubarShortcut>
          </MenubarItem>
          <MenubarSeparator />
          <MenubarSub>
            <MenubarSubTrigger>Share</MenubarSubTrigger>
            <MenubarSubContent>
              <MenubarItem>Email Link</MenubarItem>
              <MenubarItem>Messages</MenubarItem>
              <MenubarItem>Notes</MenubarItem>
            </MenubarSubContent>
          </MenubarSub>
          <MenubarSeparator />
          <MenubarItem>
            Print... <MenubarShortcut>⌘P</MenubarShortcut>
          </MenubarItem>
        </MenubarContent>
      </MenubarMenu>
    </Menubar>
  );
}
```

### With Groups and Radios

```tsx
import {
  Menubar,
  MenubarMenu,
  MenubarTrigger,
  MenubarContent,
  MenubarLabel,
  MenubarRadioGroup,
  MenubarRadioItem,
  MenubarSeparator,
} from "laif-ds";

export function MenubarWithGroups() {
  return (
    <Menubar>
      <MenubarMenu>
        <MenubarTrigger>Options</MenubarTrigger>
        <MenubarContent>
          <MenubarLabel>Theme</MenubarLabel>
          <MenubarSeparator />
          <MenubarRadioGroup value="light">
            <MenubarRadioItem value="light">Light</MenubarRadioItem>
            <MenubarRadioItem value="dark">Dark</MenubarRadioItem>
            <MenubarRadioItem value="system">System</MenubarRadioItem>
          </MenubarRadioGroup>
        </MenubarContent>
      </MenubarMenu>
    </Menubar>
  );
}
```

### Destructive Item

```tsx
import {
  Menubar,
  MenubarMenu,
  MenubarTrigger,
  MenubarContent,
  MenubarItem,
  MenubarSeparator,
  MenubarShortcut,
} from "laif-ds";

export function DestructiveExample() {
  return (
    <Menubar>
      <MenubarMenu>
        <MenubarTrigger>Actions</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>
            Copy <MenubarShortcut>⌘C</MenubarShortcut>
          </MenubarItem>
          <MenubarItem>
            Paste <MenubarShortcut>⌘V</MenubarShortcut>
          </MenubarItem>
          <MenubarSeparator />
          <MenubarItem variant="destructive">
            Delete <MenubarShortcut>⌘⌫</MenubarShortcut>
          </MenubarItem>
        </MenubarContent>
      </MenubarMenu>
    </Menubar>
  );
}
```

---

## Notes

- **Composition**: Combine subcomponents to build complex menus.
- **Shortcuts**: Use `MenubarShortcut` for right-aligned hints.
- **A11y**: Labels and roles are handled by Radix primitives and DS styling.