Header

Open this example in a new tab: header

<header class="asp-header asp-header--border">
  <div class="asp-header__container--top">
    <div class="asp-container">
      <a class="asp-link--plain asp-header__link asp-header__app" href="#">
        <img class="asp-header__app-logo" src="https://cdn.policedigital.services/frontend/124/img/asp-crest-with-text.svg" height="50" width="264" alt="Avon and Somerset Police">
      </a>
    </div>
  </div>
  <div class="asp-header__container--bottom">
      <div class="asp-header__mobile">
          <button class="asp-header__button asp-header__button--left asp-header__button--menu asp-js-toggle-button" type="button" data-toggle-element=".asp-header__js-content--menu" data-toggle-hide-elements=".asp-header__js-content--search,.asp-header__js-content--account" style="display:none">Menu</button>
      </div>
      <nav class="asp-header__content asp-header__content--menu asp-header__js-content--menu">
        <ul class="asp-list--plain asp-header__list">
          <li class="asp-header__item"><a class="asp-link--plain asp-header__link" href="#">Menu item 1</a></li>
          <li class="asp-header__item"><a class="asp-link--plain asp-header__link" href="#">Menu item 2</a></li>
        </ul>
      </nav>
        <button class="asp-header__button asp-header__button--middle asp-header__button--search asp-js-toggle-button" type="button" data-toggle-element=".asp-header__js-content--search" data-toggle-hide-elements=".asp-header__js-content--menu,.asp-header__js-content--account" style="display:none"><span class="sr-only">Search</span></button>
      <div class="asp-header__content asp-header__content--top-right asp-header__content--search asp-header__js-content--search">
        <form class="form__group--inner form__group--inner-with-button asp-header__search--form">
          <label class="form__label sr-only" for="asp-header__search">Search undefined</label>
          <input class="form__input" id="asp-header__search" type="text">
          <button class="asp-button asp-button--start asp-button--append asp-header__button--search asp-header__button--search-form" type="submit"><span class="sr-only">Search</span></button>
        </form>
      </div>
        <button class="asp-header__button asp-header__button--right asp-header__button--account asp-js-toggle-button" type="button" data-toggle-element=".asp-header__js-content--account" data-toggle-hide-elements=".asp-header__js-content--menu,.asp-header__js-content--search" style="display:none"><span class="sr-only">Account</span></button>
      <nav class="asp-header__content  asp-header__js-content--account">
        <ul class="asp-list--plain asp-header__list asp-header__list--account">
          <li class="asp-header__item asp-header__item--truncate">
            <span class="asp-header__truncate"><span class="sr-only">Signed in as </span> Christopher King (1234)</span>
          </li>
          <li class="asp-header__item"><a class="asp-link--plain asp-header__link asp-header__link--account" href="#">Logout</a></li>
        </ul>
      </nav>
  </div>
</header>

{% from "components/header/macro.njk" import aspHeader %}

{{ aspHeader({
  app: {
    title: "Service name",
    href: "#",
    icon: "default",
    separator: true
  },
  menu: [
    {
      text: "Menu item 1",
      href: "#"
    },
    {
      text: "Menu item 2",
      href: "#"
    }
  ],
  search: true,
  account: {
    name: "Christopher King (1234)",
    logout: "#"
  }
}) }}

{% from "@asp-frontend/components/header/macro.twig" import aspHeader %}

{{ aspHeader({
  app: {
    title: "Service name",
    href: "#",
    icon: "default",
    separator: true
  },
  menu: [
    {
      text: "Menu item 1",
      href: "#"
    },
    {
      text: "Menu item 2",
      href: "#"
    }
  ],
  search: true,
  account: {
    name: "Christopher King (1234)",
    logout: "#"
  }
}) }}