# App-menu


## Examples

### Default

```html
<m-app-menu
        id="modal"
        position="${args.position}"
        .open="${args.open}"
        .items="${args.items}"
      ></m-app-menu>
```

### CustomActivator

```html
<m-app-menu
        id="custom-activator"
        position="${args.position}"
        .open="${args.open}"
      >
        <m-button slot="activator"
          >Open app menu
          <m-icon slot="end" name="caret-up-down"></m-icon>
        </m-button>
      </m-app-menu>
      <script>
        const appMenu = document.getElementById("custom-activator");
        appMenu.items = [
          {
            heading: "Your applications",
            apps: [
              {
                name: "Varbi",
                description: "Rekryteringsverktyg",
                href: "https://varbi.com",
                selected: true,
              },
            ],
          },
        ];
      </script>
```

### UsingSlotContent

```html
<m-app-menu id="with-slot">
        <m-nav>
          <m-nav-group heading="Your applications">
            <m-nav-group-app
              name="Varbi"
              id="varbi"
              description="Rekryteringsverktyg"
              href="https://varbi.com"
              selected
            ></m-nav-group-app>
          </m-nav-group>
          <m-nav-group heading="Extras">
            <m-nav-group-app
              name="Marketing"
              id="marketing"
              description="Mät kandidatsupplevelsen"
              href="https://realcruit.se"
              purchase
            ></m-nav-group-app>
          </m-nav-group>
        </m-nav>
      </m-app-menu>
```