# App-header


## Examples

### Default

```html
<m-app-header ?fluid=${args.fluid}>
      <m-app-menu
        slot="app-menu"
        id="app-menu"
        .items=${[
          {
            heading: "Your applications",
            apps: [
              {
                name: "Talentrekry",
                id: "talentrekry",
                description: "Recruitment",
                href: "/talentrekry",
                selected: false,
              },
            ],
          },
        ]}></m-app-menu>
      <a slot="logo" href="/portal" class="logo">
        <img src="/grade-logo-dark.svg" alt="Grade" height="24" />
      </a>

      <m-button slot="additional-navigation" size="s" variant="plain" href="#" target="_blank">
        Support
        <m-icon slot="end" name="external"></m-icon>
      </m-button>
      <m-button slot="additional-navigation" variant="plain" size="s" disabled>
        Documentation
        <m-icon slot="end" name="external"></m-icon>
      </m-button>

      <m-user-menu slot="additional-navigation">
        <m-button slot="buttons" variant="plain" alignment="left" fullwidth>
          Account
        </m-button>
        <m-button slot="buttons" variant="plain" alignment="left" fullwidth>
          Logout
          <m-icon slot="end" name="sign-out"></m-icon>
        </m-button>
      </m-user-menu>
      <m-main-navigation slot="navigation">
        <m-nav-item href="/portal" label="Home"></m-nav-item>
        <m-nav-item href="/portal" label="Your tools"></m-nav-item>
        <m-nav-item href="/portal" label="Account with long label" active></m-nav-item>
      </m-main-navigation>

    </m-app-header>
```