# App-header


## Examples

### Default

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

      <div slot="right">
        <m-button-group spacing="xs">
          <m-button size="s" variant="plain" href="#" target="_blank">
            Support
            <m-icon slot="end" name="external"></m-icon>
          </m-button>
          <m-button variant="plain" size="s" disabled>
            Documentation
            <m-icon slot="end" name="external"></m-icon>
          </m-button>
        </m-button-group>
        <m-popover 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="true" fullwidth="true" href="/account">
              Account
            </m-button>
            <m-button variant="plain" size="s" alignment="left" underline="true" fullwidth="true">
              Logout
              <m-icon slot="end" name="sign-out"></m-icon>
            </m-button>
          </div>
        </m-popover>
      </div>

      <div slot="bottom">
        <nav class="main-nav" aria-label="Main navigation">
          <a href="/portal" class="main-nav__item main-nav__item--active">Your tools</a>
          <a href="/account" class="main-nav__item">Account</a>
        </nav>
      </div>
    </m-app-header>
```

### WithoutMenu

```html
<m-app-header ?showMenu=${args.showMenu}>
      <div slot="left">
        <a href="/portal" class="logo">
          <img src="/grade-logo-dark.svg" alt="Grade" height="24" />
        </a>
      </div>

      <div slot="right">
        <m-select
          value="en"
          name="select-language"
          placeholder="Language"
          label="Change language, current language is English"
          labelHidden="true"
          icon="globe-simple"
        >
          <option value="en">English</option>
          <option value="fi">Finnish</option>
          <option value="sv">Swedish</option>
          <option value="no">Norwegian</option>
          <option value="da">Danish</option>
        </m-select>
      </div>
    </m-app-header>
```

### WithCustomNavigation

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

      <div slot="right">
        <m-button-group spacing="xs">
          <m-button size="s" variant="plain" href="#" target="_blank">
            Support
            <m-icon slot="end" name="external"></m-icon>
          </m-button>
        </m-button-group>
        <m-popover 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="true" fullwidth="true" href="/account">
              Account
            </m-button>
            <m-button variant="plain" size="s" alignment="left" underline="true" fullwidth="true">
              Logout
              <m-icon slot="end" name="sign-out"></m-icon>
            </m-button>
          </div>
        </m-popover>
      </div>

      <div slot="bottom">
        <nav class="main-nav" aria-label="Main navigation">
          <a href="/talentrekry" class="main-nav__item main-nav__item--active">Recruitment</a>
          <a href="/talentrekry#" class="main-nav__item">Substitutes</a>
          <a href="/talentrekry#" class="main-nav__item">Substitute management</a>
          <a href="/talentrekry#" class="main-nav__item">Reports</a>
          <a href="/talentrekry#" class="main-nav__item">Settings</a>
        </nav>
      </div>
    </m-app-header>
```