# 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-popover slot="additional-navigation" mode="auto" placement="bottom" showtitle title="User menu">
        <button type="button" slot="trigger" class="avatar" aria-label="User menu"> FL </button>
        <div slot="content" style="min-width: 160px">
          <m-button variant="plain" size="s" alignment="left" underline fullwidth href="/account"> Account </m-button>
          <m-button variant="plain" size="s" alignment="left" underline fullwidth>
            Logout
            <m-icon slot="end" name="sign-out"></m-icon>
          </m-button>
        </div>
      </m-popover>

      <a slot="navigation" href="/portal" class="main-nav__item main-nav__item--active">Your tools</a>
    </m-app-header>
```