---

## Menu
Action menu triggered by a button with nested items, icons, separators, and keyboard navigation.

**Import:** `import { Menu } from '@urbicon-ui/blocks';`

### Examples
```svelte
<Menu placeholder="Actions" items={[
  { label: 'Edit', onSelect: () => edit() },
  { label: 'Duplicate', onSelect: () => duplicate() },
  { type: 'section', label: 'Danger' },
  { label: 'Delete', onSelect: () => confirmDelete() }
]} />
```

```svelte
<Menu placeholder="More">
  <MenuSection label="Edit" />
  <MenuItem onSelect={() => rename()}>Rename</MenuItem>
  <MenuItem onSelect={() => duplicate()}>Duplicate</MenuItem>
  <MenuDivider />
  <MenuItem onSelect={() => confirmDelete()}>Delete</MenuItem>
</Menu>
```

```svelte
<Menu items={actionItems}>
  {#snippet customTrigger(toggle, open)}
    <Button
      variant="ghost"
      aria-label="Actions"
      aria-haspopup="menu"
      aria-expanded={open}
      onclick={toggle}
    >
      <MoreHorizontalIcon />
    </Button>
  {/snippet}
</Menu>
```

### Variants
- chevronAnimation: fade, none, rotate, translate (default: rotate)
- disabled: true
- itemSize: lg, md, sm (default: md)
- open: true (default: false)
- placement: bottom, bottom-end, bottom-start, top, top-end, top-start (default: bottom-start)
- syncWidth: false, true (default: true)
- tier: commit, modify (default: commit)
- usePortal: false, true (default: true)

### Api
| Prop | Type | Required | Default | Description |
| --- | --- | :---: | --- | --- |
| ...AnimationProps | `inherited` | no |  | Properties inherited from AnimationProps |
| ...HTMLAttributes<HTMLDivElement> | `HTMLAttributes` | no |  | HTML attributes (excluding: 'children' | 'class' | 'placeholder') |
| ...MenuVariants | `VariantProps` | no |  | Styling variants from MenuVariants |
| class | `string` | no |  | Additional CSS classes to apply to the Menu component |
| customFooter | `Snippet` | no |  | Optional custom footer rendered below the items list. |
| customHeader | `Snippet` | no |  | Optional custom header rendered above the items list. |
| customItem | `Snippet<[TItem]>` | no |  | Custom per-item content. **Render visible content only** — the outer `role="menuitem"` button is provided by Menu and handles the click / keyboard activation. Putting an interactive element (`<button>`, `<a>`) inside the snippet creates nested-interactive HTML and triggers the item's action twice via event bubbling.  Positional arg: `(item)`. To dispatch from outside the normal click (e.g. a "Recent" entry that needs to activate from a parent shortcut), call the item's own `onSelect` directly. |
| customTrigger | `Snippet<[() => void, boolean, () => void]>` | no |  | Replace the default trigger button (chevron + label) with a custom element. Positional args: `(toggle, open, dismiss)`.  - `toggle`: flips the open state — wire this to your custom trigger's   click handler so the menu can be opened from the consumer's element. - `open`: current open state — useful for `aria-expanded`. - `dismiss`: closes the menu without changing toggle history; rarely   needed but provided for symmetry.  The consumer's element should bind its `onclick` to `toggle` and set `aria-expanded={open}` + `aria-haspopup="menu"` for ARIA correctness. |
| id | `string` | no |  | Id property for the Menu component |
| chevronAnimation | `'fade' | 'none' | 'rotate' | 'translate'` | no | rotate | Controls the chevronAnimation behavior and appearance of the Menu component. Available options: fade, none, rotate, translate. |
| disabled | `'true'` | no |  | Controls the disabled behavior and appearance of the Menu component. Available options: true. |
| itemSize | `'lg' | 'md' | 'sm'` | no | md | Controls the itemSize behavior and appearance of the Menu component. Available options: lg, md, sm. |
| open | `'true'` | no | false | Controls the open behavior and appearance of the Menu component. Available options: true. |
| placement | `'bottom' | 'bottom-end' | 'bottom-start' | 'top' | 'top-end' | 'top-start'` | no | bottom-start | Controls the positioning and alignment of the Menu relative to its container or trigger element. Available options: bottom, bottom-end, bottom-start, and 3 more. |
| syncWidth | `'false' | 'true'` | no | true | Controls the syncWidth behavior and appearance of the Menu component. Available options: false, true. |
| tier | `'commit' | 'modify'` | no | commit | Controls the tier behavior and appearance of the Menu component. Available options: commit, modify. |
| usePortal | `'false' | 'true'` | no | true | Controls the usePortal behavior and appearance of the Menu component. Available options: false, true. |

Inherited from:
- MenuVariants (external)
- Omit<MenuSpecificProps<TItem>, keyof MenuVariants> (omit-pattern)
- MenuCustomSlots (local-interface)
- AnimationProps (external)
- Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'class' | 'placeholder'> (omit-pattern)