# Menu-group


## Examples

### Default

```html
<div style="padding: 100px; text-align: center;">
      <m-menu-group .title=${args.title}>
        <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>
    </div>
```

### WithoutTitle

```html
<div style="padding: 100px; text-align: center;">
      <m-menu-group>
        <m-button size="m" alignment="left" fullWidth variant="plain">
          <m-icon slot="start" name="pen" size="s"></m-icon>
          Edit
        </m-button>
        <m-button size="m" alignment="left" fullWidth variant="plain">
          <m-icon slot="start" name="copy" size="s"></m-icon>
          Copy
        </m-button>
        <m-button size="m" alignment="left" fullWidth variant="plain">
          <m-icon slot="start" name="share-network" size="s"></m-icon>
          Share
        </m-button>
      </m-menu-group>
    </div>
```

### WithMenuComponent

```html
<div style="padding: 100px; text-align: center;">
      <m-menu>
        <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>
```

### MixedContent

```html
<div style="padding: 100px; text-align: center;">
      <m-menu>
        <m-button slot="trigger">Open Menu <m-icon name="menu-vertical" slot="end"></m-icon></m-button>
        <!-- Individual button before groups -->
        <m-button slot="buttons" size="m" alignment="left" fullWidth variant="plain">
          <m-icon slot="start" name="info" size="s"></m-icon>
          View Details
        </m-button>
        <m-divider slot="buttons" spacing="none"></m-divider>
        <!-- First group -->
        <m-menu-group slot="buttons" title="Actions">
          <m-button size="m" alignment="left" fullWidth variant="plain">
            <m-icon slot="start" name="pen" size="s"></m-icon>
            Edit
          </m-button>
          <m-button size="m" alignment="left" fullWidth variant="plain">
            <m-icon slot="start" name="copy" size="s"></m-icon>
            Duplicate
          </m-button>
        </m-menu-group>
        <m-divider slot="buttons" spacing="none"></m-divider>
        <!-- Second group -->
        <m-menu-group slot="buttons" title="Share">
          <m-button size="m" alignment="left" fullWidth variant="plain">
            <m-icon slot="start" name="share-network" size="s"></m-icon>
            Share
          </m-button>
          <m-button size="m" alignment="left" fullWidth variant="plain">
            <m-icon slot="start" name="envelope-simple" size="s"></m-icon>
            Email
          </m-button>
        </m-menu-group>
        <m-divider slot="buttons" spacing="none"></m-divider>
        <!-- Individual button after groups -->
        <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-menu>
    </div>
```

### UserMenuExample

```html
<div style="padding: 100px; text-align: center;">
      <m-user-menu initials="JD" title="User menu">
        <m-menu-group slot="buttons" title="Account">
          <m-button size="m" alignment="left" fullWidth variant="plain">
            <m-icon slot="start" name="user" size="s"></m-icon>
            My Profile
          </m-button>
          <m-button size="m" alignment="left" fullWidth variant="plain">
            <m-icon slot="start" name="gear" size="s"></m-icon>
            Account Settings
          </m-button>
        </m-menu-group>
        <m-divider slot="buttons" spacing="none"></m-divider>
        <m-menu-group slot="buttons" title="Support">
          <m-button size="m" alignment="left" fullWidth variant="plain">
            <m-icon slot="start" name="question" size="s"></m-icon>
            Help & Support
          </m-button>
          <m-button size="m" alignment="left" fullWidth variant="plain">
            <m-icon slot="start" name="envelope-simple" size="s"></m-icon>
            Contact Us
          </m-button>
        </m-menu-group>
        <m-divider slot="buttons" spacing="none"></m-divider>
        <m-button slot="buttons" size="m" alignment="left" fullWidth variant="danger">
          <m-icon slot="start" name="sign-out" size="s"></m-icon>
          Sign Out
        </m-button>
      </m-user-menu>
    </div>
```