# 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="20" />
      </a>
      <span slot="app-name">Talentrekry</span>

      <m-menu slot="additional-navigation" placement="bottom-end">
        <m-button slot="trigger" variant="plain" underline size="s"><m-icon name="tree-structure" slot="start"></m-icon>Stockholm stad</m-button>
        <m-menu-group slot="buttons" title="Organization">
          <m-button size="m" alignment="left" fullwidth="" variant="plain">
            Stockholm stad
          </m-button>
          <m-button size="m" alignment="left" fullwidth="" variant="plain">
            Organization 1
          </m-button>
          <m-button size="m" alignment="left" fullwidth="" variant="plain">
            Organization 2
          </m-button>
        </m-menu-group>
      </m-menu>


      <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>
```

### WithoutAppName

```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-menu slot="additional-navigation" placement="bottom-end">
        <m-button slot="trigger" variant="plain" underline size="s"><m-icon name="tree-structure" slot="start"></m-icon>Stockholm stad</m-button>
        <m-menu-group slot="buttons" title="Organization">
          <m-button size=${"m"} alignment="left" fullwidth="" variant="plain">
            Stockholm stad
          </m-button>
          <m-button size="m" alignment="left" fullwidth="" variant="plain">
            Organization 1
          </m-button>
          <m-button size="m" alignment="left" fullwidth="" variant="plain">
            Organization 2
          </m-button>
        </m-menu-group>
      </m-menu>

      <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>
```