# Menu


## Examples

### Default

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

### WithSlottedMenuItems

```html
<div style="padding: 100px; text-align: center;">
      <m-menu
        ?open=${args.open}
        placement=${args.placement}
        ?overlay=${args.overlay}
        ?bottomSheet=${args.bottomSheet}
      >
        <m-button slot="trigger">Open Menu <m-icon name="menu-vertical" slot="end"></m-icon></m-button>
        <m-button slot="buttons" size="m" alignment="left" fullWidth variant="plain">
          <m-icon slot="start" name="star" size="s"></m-icon>
          Favorite
        </m-button>
        <m-button slot="buttons" size="m" alignment="left" fullWidth variant="plain">
          <m-icon slot="start" name="heart" size="s"></m-icon>
          Like
        </m-button>
        <m-button slot="buttons" size="m" alignment="left" fullWidth variant="danger">
          <m-icon slot="start" name="trash" size="s"></m-icon>
          Delete
        </m-button>
        <m-button slot="buttons" size="m" alignment="left" fullWidth variant="plain">
          <m-icon slot="start" name="gear" size="s"></m-icon>
          Settings
        </m-button>
      </m-menu>
    </div>
```

### WithComplexSlottedContent

```html
<div style="padding: 100px; text-align: center;">
      <m-menu
        ?open=${args.open}
        placement=${args.placement}
        ?overlay=${args.overlay}
        ?bottomSheet=${args.bottomSheet}
      >
        <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>Project Settings</strong>
              <span style="color: var(--m-color-text-weak);">Configure your project preferences</span>
            </m-stack>
          </m-stack>
        </div>
        <m-button slot="buttons" size="m" alignment="left" fullWidth variant="plain">
          <m-icon slot="start" name="pen" size="s"></m-icon>
          Edit Project
        </m-button>
        <m-button slot="buttons" size="m" alignment="left" fullWidth variant="plain">
          <m-icon slot="start" name="share-network" size="s"></m-icon>
          Share Project
        </m-button>
        <m-button slot="buttons" size="m" alignment="left" fullWidth variant="plain">
          <m-icon slot="start" name="copy" size="s"></m-icon>
          Duplicate
        </m-button>
        <div slot="content" style="padding: var(--m-space-m); border-top: 1px solid var(--m-color-border-weak);">
          <m-stack spacing="m">
            <div style="display: flex; align-items: center; gap: var(--m-space-s);">
              <m-icon name="info" size="s" style="color: var(--m-color-text-weak);"></m-icon>
              <span style="font-size: var(--m-font-size-xs); color: var(--m-color-text-weak);">
                Last modified: 2 hours ago
              </span>
            </div>
            <m-button size="s" variant="secondary" fullWidth>
              View Project History
            </m-button>
          </m-stack>
        </div>
      </m-menu>
    </div>
```

### WithMenuGroups

```html
<div style="padding: 100px; text-align: center;">
      <m-menu
        ?open=${args.open}
        placement=${args.placement}
        ?overlay=${args.overlay}
        ?bottomSheet=${args.bottomSheet}
      >
        <m-button slot="trigger">Open Menu <m-icon name="menu-vertical" slot="end"></m-icon></m-button>
        <m-menu-group slot="buttons" title="Actions">
          <m-button size="m" alignment="left" fullWidth variant="plain">
            <m-icon slot="start" name="star" size="s"></m-icon>
            Favorite
          </m-button>
          <m-button size="m" alignment="left" fullWidth variant="plain">
            <m-icon slot="start" name="heart" size="s"></m-icon>
            Like
          </m-button>
          <m-button size="m" alignment="left" fullWidth variant="danger">
            <m-icon slot="start" name="trash" size="s"></m-icon>
            Delete
          </m-button>
        </m-menu-group>
        <m-divider slot="buttons" spacing="none"></m-divider>
        <m-menu-group slot="buttons" title="Settings">
          <m-button size="m" alignment="left" fullWidth variant="plain">
            <m-icon slot="start" name="gear" size="s"></m-icon>
            Preferences
          </m-button>
          <m-button size="m" alignment="left" fullWidth variant="plain">
            <m-icon slot="start" name="question" size="s"></m-icon>
            Help
          </m-button>
        </m-menu-group>
      </m-menu>
    </div>
```

### WithCustomTrigger

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

### BottomSheet

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