# Menu


## Examples

### Default

```html
<div style="padding: 100px; text-align: center;">
      <m-menu
        ?open=${args.open}
        placement=${args.placement}
        ?overlay=${args.overlay}
        .groups=${args.groups}
      >
        <m-button slot="trigger">Open Menu <m-icon name="menu-vertical" slot="end"></m-icon></m-button>
      </m-menu>
    </div>
```

### WithCustomTrigger

```html
<div style="padding: 100px; text-align: center;">
      <m-menu
        ?open=${args.open}
        placement=${args.placement}
        ?overlay=${args.overlay}
        .groups=${args.groups}
      >
        <m-button variant="primary" slot="trigger">
          Custom Trigger
          <m-icon slot="end" name="menu-vertical"></m-icon>
        </m-button>
      </m-menu>
    </div>
```

### WithDisabledItems

```html
<div style="padding: 100px; text-align: center;">
      <m-menu
        ?open=${args.open}
        placement=${args.placement}
        ?overlay=${args.overlay}
        .groups=${args.groups}
      >
        <m-button slot="trigger">Open Menu <m-icon name="dots" slot="end"></m-icon></m-button>
      </m-menu>
    </div>
```

### WithOverlay

```html
<div style="padding: 100px; text-align: center;">
      <m-menu
        ?open=${args.open}
        placement=${args.placement}
        ?overlay=${args.overlay}
        .groups=${args.groups}
      >
        <m-button slot="trigger">Open Menu <m-icon name="menu-vertical" slot="end"></m-icon></m-button>
      </m-menu>
    </div>
```

### SingleGroup

```html
<div style="padding: 100px; text-align: center;">
      <m-menu
        ?open=${args.open}
        placement=${args.placement}
        ?overlay=${args.overlay}
        .groups=${args.groups}
      >
        <m-button slot="trigger">Open Menu <m-icon name="dots" slot="end"></m-icon></m-button>
      </m-menu>
    </div>
```

### WithCustomContent

```html
<div style="padding: 100px; text-align: center;">
      <m-menu
        ?open=${args.open}
        placement=${args.placement}
        ?overlay=${args.overlay}
        .groups=${args.groups}
      >
        <m-button slot="trigger">Open Menu</m-button>
        <div slot="header" style="padding: var(--m-space-m); border-bottom: 1px solid var(--m-color-border-weak);">
          <m-stack spacing="m">
            <m-stack spacing="xxs">
              <strong>John Doe</strong>
              <span style="color: var(--m-color-text-weak);">john.doe@example.com</span>
            </m-stack>
          </m-stack>
        </div>
        <div slot="content" style="padding: var(--m-space-m);">
          <m-stack spacing="m">
            <p>Custom content can be added using the content slot</p>
            <m-button>Custom Button</m-button>
          </m-stack>
        </div>
      </m-menu>
    </div>
```

### PlacementExamples

```html
<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; padding: 100px;">
      <div style="text-align: center;">
        <m-menu
          placement=${MenuPlacement['top-start']}
          .groups=${args.groups}
        >
          <m-button slot="trigger">Top Left</m-button>
        </m-menu>
      </div>
      <div style="text-align: center;">
        <m-menu
          placement=${MenuPlacement['top-end']}
          .groups=${args.groups}
        >
          <m-button slot="trigger">Top Right</m-button>
        </m-menu>
      </div>
      <div style="text-align: center;">
        <m-menu
          placement=${MenuPlacement['bottom-start']}
          .groups=${args.groups}
        >
          <m-button slot="trigger">Bottom Left</m-button>
        </m-menu>
      </div>
      <div style="text-align: center;">
        <m-menu
          placement=${MenuPlacement['bottom-end']}
          .groups=${args.groups}
        >
          <m-button slot="trigger">Bottom Right</m-button>
        </m-menu>
      </div>
    </div>
```

### WithClickEvents

```html
<div style="padding: 100px; text-align: center;">
      <m-menu
        ?open=${args.open}
        placement=${args.placement}
        ?overlay=${args.overlay}
        .groups=${args.groups}
        @item-click=${(e: CustomEvent) => console.log('Menu item clicked:', e.detail.item.label)}
      >
        <m-button slot="trigger">Click Me <m-icon name="menu-vertical" slot="end"></m-icon></m-button>
      </m-menu>
    </div>
```

### WithLinks

```html
<div style="padding: 100px; text-align: center;">
      <m-menu
        ?open=${args.open}
        placement=${args.placement}
        ?overlay=${args.overlay}
        .groups=${args.groups}
      >
        <m-button slot="trigger">Open Menu <m-icon name="menu-vertical" slot="end"></m-icon></m-button>
      </m-menu>
    </div>
```

### WithHeader

```html
<div style="padding: 100px; text-align: center;">
      <m-menu
        ?open=${args.open}
        placement=${args.placement}
        ?overlay=${args.overlay}
        .groups=${args.groups}
      >
        <m-button slot="trigger">Open Menu <m-icon name="menu-vertical" slot="end"></m-icon></m-button>
        <div slot="header" style="padding: var(--m-space-m); border-bottom: 1px solid var(--m-color-border-weak);">
          <m-stack spacing="m">
            <m-stack spacing="xxs">
              <strong>John Doe</strong>
              <span style="color: var(--m-color-text-weak);">john.doe@example.com</span>
            </m-stack>
          </m-stack>
        </div>
      </m-menu>
    </div>
```

### SimpleItems

```html
<div style="padding: 100px; text-align: center;">
      <m-menu
        ?open=${args.open}
        placement=${args.placement}
        ?overlay=${args.overlay}
        .items=${args.items}
      >
        <m-button slot="trigger">Open Menu <m-icon name="menu-vertical" slot="end"></m-icon></m-button>
      </m-menu>
    </div>
```