Skip to content
ASP Digital Design System

Your web browser is out of date

Your web browser (the software you use to access the internet) is out of date. You need to update it or use a different web browser to ensure you can complete this form.

Cookies disabled

Cookies are currently not enabled in your web browser. You need to enable cookies to ensure you can complete this form.

Header

The Header component provides the main service branding and primary navigation at the top of every page. It can include the service name, menu items, search, and account information depending on the needs of the application.

The header helps users understand where they are, how to navigate the service.

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/147/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>
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Name Type Description
app object Required. Object of app information. At least several parameters are required. See app.
menu array A list of menu links. See menu.
search array or false (boolean) If true, search will show. The array below can be built up to customise search settings. At least one paramater is required. See search.
account array or false (boolean) An array of account settings. At least one parameter is required. See account.

Options for app

Name Type Description
title string or false (boolean) The title of the app.
href string Required. The URL that the image and title will link to.
icon array, string or null An array of icon information. At least several parameters are required. Default values are default or null which will display the formation / citizen site logo (crest with text) and crest which will display the image with the only the crest. If default, crest or null, the following parameters will be ignored. See icon.
separator boolean If true, a separator between the logo and title will be displayed. Default values are false (boolean), true (boolean) or null.

Options for icon

Name Type Description
height number or false (boolean) This is the height of the header image. Default value is 50.
width number This is the width of the header image. Required if 'src' is a string.
alt string or false (boolean) The text that displays in the image alt. Default values are false (boolean) or null (returns a blank alt). If 'title' is provided, the 'icon' is default or if no other parameters within icon information are set, this 'alt' parameter will be ignored.
source string or false (boolean) The image url. Default values are 'default', false (boolean) or null. Note; 'default', false (boolean) or null will return the default image. To use additional webp or srcset use sources parameters. If sources are correct, this source parameter will be ignored.
sources array or false (boolean) Array of image urls all needed to create the srcsets options within the picture element. Default values are false (boolean) or null. If false (boolean), the following parameters will be ignored. jpgpx1 is required with either; jpgpx2 for retina image srcset or webpx1 for a webp picture with srcsets. If all options are present then a picture element will be present with all options available. See sources.

Options for sources

Name Type Description
jpgpx1 string Required. The url for 1x pixel density for a jpg or jpeg format image. If this is the only source, the image can be a retina image 2:1.
jpgpx2 string The url for 2x pixel density for a jpg or jpeg format image.
webpx1 string The url for 1x pixel density for a webp format image.
webpx2 string The url for 2x pixel density for a webp format image.

Options for menu

Name Type Description
href string Required. The URL of menu item.
text string Required. The text of menu item.
Name Type Description
form array or false (boolean) A list of additional attributes for the form. Common attribute names for form are action, id and method. See form.
label string of false (boolean) If present this will
input array or false (boolean) A list of additional attributes for the input. Common attribute names for input are placeholder and value. See input.

Options for form

Name Type Description
name string Required. The name of the attribute.
value string The value of the attribute. Note, boolean values must be strings. Default values are false (boolean) or null.

Options for input

Name Type Description
name string Required. The name of the attribute.
value string The value of the attribute. Note, boolean values must be strings. Default values are false (boolean) or null.

Options for account

Name Type Description
name string Name of person logged in account.
logout string or false (boolean) The URL of the logout page. 
{% 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: "#"
  }
}) }}
Twig macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Name Type Description
app object Required. Object of app information. At least several parameters are required. See app.
menu array A list of menu links. See menu.
search array or false (boolean) If true, search will show. The array below can be built up to customise search settings. At least one paramater is required. See search.
account array or false (boolean) An array of account settings. At least one parameter is required. See account.

Options for app

Name Type Description
title string or false (boolean) The title of the app.
href string Required. The URL that the image and title will link to.
icon array, string or null An array of icon information. At least several parameters are required. Default values are default or null which will display the formation / citizen site logo (crest with text) and crest which will display the image with the only the crest. If default, crest or null, the following parameters will be ignored. See icon.
separator boolean If true, a separator between the logo and title will be displayed. Default values are false (boolean), true (boolean) or null.

Options for icon

Name Type Description
height number or false (boolean) This is the height of the header image. Default value is 50.
width number This is the width of the header image. Required if 'src' is a string.
alt string or false (boolean) The text that displays in the image alt. Default values are false (boolean) or null (returns a blank alt). If 'title' is provided, the 'icon' is default or if no other parameters within icon information are set, this 'alt' parameter will be ignored.
source string or false (boolean) The image url. Default values are 'default', false (boolean) or null. Note; 'default', false (boolean) or null will return the default image. To use additional webp or srcset use sources parameters. If sources are correct, this source parameter will be ignored.
sources array or false (boolean) Array of image urls all needed to create the srcsets options within the picture element. Default values are false (boolean) or null. If false (boolean), the following parameters will be ignored. jpgpx1 is required with either; jpgpx2 for retina image srcset or webpx1 for a webp picture with srcsets. If all options are present then a picture element will be present with all options available. See sources.

Options for sources

Name Type Description
jpgpx1 string Required. The url for 1x pixel density for a jpg or jpeg format image. If this is the only source, the image can be a retina image 2:1.
jpgpx2 string The url for 2x pixel density for a jpg or jpeg format image.
webpx1 string The url for 1x pixel density for a webp format image.
webpx2 string The url for 2x pixel density for a webp format image.

Options for menu

Name Type Description
href string Required. The URL of menu item.
text string Required. The text of menu item.
Name Type Description
form array or false (boolean) A list of additional attributes for the form. Common attribute names for form are action, id and method. See form.
label string of false (boolean) If present this will
input array or false (boolean) A list of additional attributes for the input. Common attribute names for input are placeholder and value. See input.

Options for form

Name Type Description
name string Required. The name of the attribute.
value string The value of the attribute. Note, boolean values must be strings. Default values are false (boolean) or null.

Options for input

Name Type Description
name string Required. The name of the attribute.
value string The value of the attribute. Note, boolean values must be strings. Default values are false (boolean) or null.

Options for account

Name Type Description
name string Name of person logged in account.
logout string or false (boolean) The URL of the logout page. 
{% 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: "#"
  }
}) }}

Open this example in a new tab: header

<header class="asp-header">
  <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/147/img/asp-crest-with-text.svg" height="50" width="264" alt="Avon and Somerset Police">
      </a>
    </div>
  </div>
</header>
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Name Type Description
app object Required. Object of app information. At least several parameters are required. See app.
menu array A list of menu links. See menu.
search array or false (boolean) If true, search will show. The array below can be built up to customise search settings. At least one paramater is required. See search.
account array or false (boolean) An array of account settings. At least one parameter is required. See account.

Options for app

Name Type Description
title string or false (boolean) The title of the app.
href string Required. The URL that the image and title will link to.
icon array, string or null An array of icon information. At least several parameters are required. Default values are default or null which will display the formation / citizen site logo (crest with text) and crest which will display the image with the only the crest. If default, crest or null, the following parameters will be ignored. See icon.
separator boolean If true, a separator between the logo and title will be displayed. Default values are false (boolean), true (boolean) or null.

Options for icon

Name Type Description
height number or false (boolean) This is the height of the header image. Default value is 50.
width number This is the width of the header image. Required if 'src' is a string.
alt string or false (boolean) The text that displays in the image alt. Default values are false (boolean) or null (returns a blank alt). If 'title' is provided, the 'icon' is default or if no other parameters within icon information are set, this 'alt' parameter will be ignored.
source string or false (boolean) The image url. Default values are 'default', false (boolean) or null. Note; 'default', false (boolean) or null will return the default image. To use additional webp or srcset use sources parameters. If sources are correct, this source parameter will be ignored.
sources array or false (boolean) Array of image urls all needed to create the srcsets options within the picture element. Default values are false (boolean) or null. If false (boolean), the following parameters will be ignored. jpgpx1 is required with either; jpgpx2 for retina image srcset or webpx1 for a webp picture with srcsets. If all options are present then a picture element will be present with all options available. See sources.

Options for sources

Name Type Description
jpgpx1 string Required. The url for 1x pixel density for a jpg or jpeg format image. If this is the only source, the image can be a retina image 2:1.
jpgpx2 string The url for 2x pixel density for a jpg or jpeg format image.
webpx1 string The url for 1x pixel density for a webp format image.
webpx2 string The url for 2x pixel density for a webp format image.

Options for menu

Name Type Description
href string Required. The URL of menu item.
text string Required. The text of menu item.
Name Type Description
form array or false (boolean) A list of additional attributes for the form. Common attribute names for form are action, id and method. See form.
label string of false (boolean) If present this will
input array or false (boolean) A list of additional attributes for the input. Common attribute names for input are placeholder and value. See input.

Options for form

Name Type Description
name string Required. The name of the attribute.
value string The value of the attribute. Note, boolean values must be strings. Default values are false (boolean) or null.

Options for input

Name Type Description
name string Required. The name of the attribute.
value string The value of the attribute. Note, boolean values must be strings. Default values are false (boolean) or null.

Options for account

Name Type Description
name string Name of person logged in account.
logout string or false (boolean) The URL of the logout page. 
{% from "components/header/macro.njk" import aspHeader %}


{{ aspHeader({
  app: {
    href: "#",
    icon: "default"
  }
}) }}
Twig macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Name Type Description
app object Required. Object of app information. At least several parameters are required. See app.
menu array A list of menu links. See menu.
search array or false (boolean) If true, search will show. The array below can be built up to customise search settings. At least one paramater is required. See search.
account array or false (boolean) An array of account settings. At least one parameter is required. See account.

Options for app

Name Type Description
title string or false (boolean) The title of the app.
href string Required. The URL that the image and title will link to.
icon array, string or null An array of icon information. At least several parameters are required. Default values are default or null which will display the formation / citizen site logo (crest with text) and crest which will display the image with the only the crest. If default, crest or null, the following parameters will be ignored. See icon.
separator boolean If true, a separator between the logo and title will be displayed. Default values are false (boolean), true (boolean) or null.

Options for icon

Name Type Description
height number or false (boolean) This is the height of the header image. Default value is 50.
width number This is the width of the header image. Required if 'src' is a string.
alt string or false (boolean) The text that displays in the image alt. Default values are false (boolean) or null (returns a blank alt). If 'title' is provided, the 'icon' is default or if no other parameters within icon information are set, this 'alt' parameter will be ignored.
source string or false (boolean) The image url. Default values are 'default', false (boolean) or null. Note; 'default', false (boolean) or null will return the default image. To use additional webp or srcset use sources parameters. If sources are correct, this source parameter will be ignored.
sources array or false (boolean) Array of image urls all needed to create the srcsets options within the picture element. Default values are false (boolean) or null. If false (boolean), the following parameters will be ignored. jpgpx1 is required with either; jpgpx2 for retina image srcset or webpx1 for a webp picture with srcsets. If all options are present then a picture element will be present with all options available. See sources.

Options for sources

Name Type Description
jpgpx1 string Required. The url for 1x pixel density for a jpg or jpeg format image. If this is the only source, the image can be a retina image 2:1.
jpgpx2 string The url for 2x pixel density for a jpg or jpeg format image.
webpx1 string The url for 1x pixel density for a webp format image.
webpx2 string The url for 2x pixel density for a webp format image.

Options for menu

Name Type Description
href string Required. The URL of menu item.
text string Required. The text of menu item.
Name Type Description
form array or false (boolean) A list of additional attributes for the form. Common attribute names for form are action, id and method. See form.
label string of false (boolean) If present this will
input array or false (boolean) A list of additional attributes for the input. Common attribute names for input are placeholder and value. See input.

Options for form

Name Type Description
name string Required. The name of the attribute.
value string The value of the attribute. Note, boolean values must be strings. Default values are false (boolean) or null.

Options for input

Name Type Description
name string Required. The name of the attribute.
value string The value of the attribute. Note, boolean values must be strings. Default values are false (boolean) or null.

Options for account

Name Type Description
name string Name of person logged in account.
logout string or false (boolean) The URL of the logout page. 
{% from "components/header/macro.njk" import aspHeader %}


{{ aspHeader({
  app: {
    href: "#",
    icon: "default"
  }
}) }}

Open this example in a new tab: header

<header class="asp-header">
  <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/147/img/asp-crest-with-text.svg" height="50" width="264" alt="Avon and Somerset Police">
      </a>
    </div>
  </div>
      <nav class="asp-header__content asp-header__content--top-right  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> john.smith@avonandsomerset.police.uk</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>
</header>
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Name Type Description
app object Required. Object of app information. At least several parameters are required. See app.
menu array A list of menu links. See menu.
search array or false (boolean) If true, search will show. The array below can be built up to customise search settings. At least one paramater is required. See search.
account array or false (boolean) An array of account settings. At least one parameter is required. See account.

Options for app

Name Type Description
title string or false (boolean) The title of the app.
href string Required. The URL that the image and title will link to.
icon array, string or null An array of icon information. At least several parameters are required. Default values are default or null which will display the formation / citizen site logo (crest with text) and crest which will display the image with the only the crest. If default, crest or null, the following parameters will be ignored. See icon.
separator boolean If true, a separator between the logo and title will be displayed. Default values are false (boolean), true (boolean) or null.

Options for icon

Name Type Description
height number or false (boolean) This is the height of the header image. Default value is 50.
width number This is the width of the header image. Required if 'src' is a string.
alt string or false (boolean) The text that displays in the image alt. Default values are false (boolean) or null (returns a blank alt). If 'title' is provided, the 'icon' is default or if no other parameters within icon information are set, this 'alt' parameter will be ignored.
source string or false (boolean) The image url. Default values are 'default', false (boolean) or null. Note; 'default', false (boolean) or null will return the default image. To use additional webp or srcset use sources parameters. If sources are correct, this source parameter will be ignored.
sources array or false (boolean) Array of image urls all needed to create the srcsets options within the picture element. Default values are false (boolean) or null. If false (boolean), the following parameters will be ignored. jpgpx1 is required with either; jpgpx2 for retina image srcset or webpx1 for a webp picture with srcsets. If all options are present then a picture element will be present with all options available. See sources.

Options for sources

Name Type Description
jpgpx1 string Required. The url for 1x pixel density for a jpg or jpeg format image. If this is the only source, the image can be a retina image 2:1.
jpgpx2 string The url for 2x pixel density for a jpg or jpeg format image.
webpx1 string The url for 1x pixel density for a webp format image.
webpx2 string The url for 2x pixel density for a webp format image.

Options for menu

Name Type Description
href string Required. The URL of menu item.
text string Required. The text of menu item.
Name Type Description
form array or false (boolean) A list of additional attributes for the form. Common attribute names for form are action, id and method. See form.
label string of false (boolean) If present this will
input array or false (boolean) A list of additional attributes for the input. Common attribute names for input are placeholder and value. See input.

Options for form

Name Type Description
name string Required. The name of the attribute.
value string The value of the attribute. Note, boolean values must be strings. Default values are false (boolean) or null.

Options for input

Name Type Description
name string Required. The name of the attribute.
value string The value of the attribute. Note, boolean values must be strings. Default values are false (boolean) or null.

Options for account

Name Type Description
name string Name of person logged in account.
logout string or false (boolean) The URL of the logout page. 
{% from "components/header/macro.njk" import aspHeader %}


{{ aspHeader({
  app: {
    href: "#",
    icon: "default"
  },
  account: {
    name: "john.smith@avonandsomerset.police.uk",
    logout: "#"
  }
}) }}
Twig macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Name Type Description
app object Required. Object of app information. At least several parameters are required. See app.
menu array A list of menu links. See menu.
search array or false (boolean) If true, search will show. The array below can be built up to customise search settings. At least one paramater is required. See search.
account array or false (boolean) An array of account settings. At least one parameter is required. See account.

Options for app

Name Type Description
title string or false (boolean) The title of the app.
href string Required. The URL that the image and title will link to.
icon array, string or null An array of icon information. At least several parameters are required. Default values are default or null which will display the formation / citizen site logo (crest with text) and crest which will display the image with the only the crest. If default, crest or null, the following parameters will be ignored. See icon.
separator boolean If true, a separator between the logo and title will be displayed. Default values are false (boolean), true (boolean) or null.

Options for icon

Name Type Description
height number or false (boolean) This is the height of the header image. Default value is 50.
width number This is the width of the header image. Required if 'src' is a string.
alt string or false (boolean) The text that displays in the image alt. Default values are false (boolean) or null (returns a blank alt). If 'title' is provided, the 'icon' is default or if no other parameters within icon information are set, this 'alt' parameter will be ignored.
source string or false (boolean) The image url. Default values are 'default', false (boolean) or null. Note; 'default', false (boolean) or null will return the default image. To use additional webp or srcset use sources parameters. If sources are correct, this source parameter will be ignored.
sources array or false (boolean) Array of image urls all needed to create the srcsets options within the picture element. Default values are false (boolean) or null. If false (boolean), the following parameters will be ignored. jpgpx1 is required with either; jpgpx2 for retina image srcset or webpx1 for a webp picture with srcsets. If all options are present then a picture element will be present with all options available. See sources.

Options for sources

Name Type Description
jpgpx1 string Required. The url for 1x pixel density for a jpg or jpeg format image. If this is the only source, the image can be a retina image 2:1.
jpgpx2 string The url for 2x pixel density for a jpg or jpeg format image.
webpx1 string The url for 1x pixel density for a webp format image.
webpx2 string The url for 2x pixel density for a webp format image.

Options for menu

Name Type Description
href string Required. The URL of menu item.
text string Required. The text of menu item.
Name Type Description
form array or false (boolean) A list of additional attributes for the form. Common attribute names for form are action, id and method. See form.
label string of false (boolean) If present this will
input array or false (boolean) A list of additional attributes for the input. Common attribute names for input are placeholder and value. See input.

Options for form

Name Type Description
name string Required. The name of the attribute.
value string The value of the attribute. Note, boolean values must be strings. Default values are false (boolean) or null.

Options for input

Name Type Description
name string Required. The name of the attribute.
value string The value of the attribute. Note, boolean values must be strings. Default values are false (boolean) or null.

Options for account

Name Type Description
name string Name of person logged in account.
logout string or false (boolean) The URL of the logout page. 
{% from "components/header/macro.njk" import aspHeader %}


{{ aspHeader({
  app: {
    href: "#",
    icon: "default"
  },
  account: {
    name: "john.smith@avonandsomerset.police.uk",
    logout: "#"
  }
}) }}

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 asp-header__app-logo--crest" src="https://cdn.policedigital.services/frontend/147/img/avon-and-somerset-constabulary-crest.svg" height="50" width="40" alt="">
          <span class="asp-header__app-name asp-header__app-name--separator">Service name</span>
      </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--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="#">New record</a></li>
          <li class="asp-header__item"><a class="asp-link--plain asp-header__link" href="#">Search records</a></li>
          <li class="asp-header__item"><a class="asp-link--plain asp-header__link" href="#">Reports</a></li>
        </ul>
      </nav>
        <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" style="display:none"><span class="sr-only">Account</span></button>
      <nav class="asp-header__content asp-header__content--top-right  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 (4321)</span>
          </li>
        </ul>
      </nav>
  </div>
</header>
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Name Type Description
app object Required. Object of app information. At least several parameters are required. See app.
menu array A list of menu links. See menu.
search array or false (boolean) If true, search will show. The array below can be built up to customise search settings. At least one paramater is required. See search.
account array or false (boolean) An array of account settings. At least one parameter is required. See account.

Options for app

Name Type Description
title string or false (boolean) The title of the app.
href string Required. The URL that the image and title will link to.
icon array, string or null An array of icon information. At least several parameters are required. Default values are default or null which will display the formation / citizen site logo (crest with text) and crest which will display the image with the only the crest. If default, crest or null, the following parameters will be ignored. See icon.
separator boolean If true, a separator between the logo and title will be displayed. Default values are false (boolean), true (boolean) or null.

Options for icon

Name Type Description
height number or false (boolean) This is the height of the header image. Default value is 50.
width number This is the width of the header image. Required if 'src' is a string.
alt string or false (boolean) The text that displays in the image alt. Default values are false (boolean) or null (returns a blank alt). If 'title' is provided, the 'icon' is default or if no other parameters within icon information are set, this 'alt' parameter will be ignored.
source string or false (boolean) The image url. Default values are 'default', false (boolean) or null. Note; 'default', false (boolean) or null will return the default image. To use additional webp or srcset use sources parameters. If sources are correct, this source parameter will be ignored.
sources array or false (boolean) Array of image urls all needed to create the srcsets options within the picture element. Default values are false (boolean) or null. If false (boolean), the following parameters will be ignored. jpgpx1 is required with either; jpgpx2 for retina image srcset or webpx1 for a webp picture with srcsets. If all options are present then a picture element will be present with all options available. See sources.

Options for sources

Name Type Description
jpgpx1 string Required. The url for 1x pixel density for a jpg or jpeg format image. If this is the only source, the image can be a retina image 2:1.
jpgpx2 string The url for 2x pixel density for a jpg or jpeg format image.
webpx1 string The url for 1x pixel density for a webp format image.
webpx2 string The url for 2x pixel density for a webp format image.

Options for menu

Name Type Description
href string Required. The URL of menu item.
text string Required. The text of menu item.
Name Type Description
form array or false (boolean) A list of additional attributes for the form. Common attribute names for form are action, id and method. See form.
label string of false (boolean) If present this will
input array or false (boolean) A list of additional attributes for the input. Common attribute names for input are placeholder and value. See input.

Options for form

Name Type Description
name string Required. The name of the attribute.
value string The value of the attribute. Note, boolean values must be strings. Default values are false (boolean) or null.

Options for input

Name Type Description
name string Required. The name of the attribute.
value string The value of the attribute. Note, boolean values must be strings. Default values are false (boolean) or null.

Options for account

Name Type Description
name string Name of person logged in account.
logout string or false (boolean) The URL of the logout page. 
{% from "components/header/macro.njk" import aspHeader %}


{{ aspHeader({
  app: {
    title: "Service name",
    href: "#",
    icon: "crest",
    separator: true
  },
  menu: [
    {
      text: "New record",
      href: "#"
    },
    {
      text: "Search records",
      href: "#"
    },
    {
      text: "Reports",
      href: "#"
    }
  ],
  account: {
    name: "Christopher King (4321)"
  }
}) }}
Twig macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Name Type Description
app object Required. Object of app information. At least several parameters are required. See app.
menu array A list of menu links. See menu.
search array or false (boolean) If true, search will show. The array below can be built up to customise search settings. At least one paramater is required. See search.
account array or false (boolean) An array of account settings. At least one parameter is required. See account.

Options for app

Name Type Description
title string or false (boolean) The title of the app.
href string Required. The URL that the image and title will link to.
icon array, string or null An array of icon information. At least several parameters are required. Default values are default or null which will display the formation / citizen site logo (crest with text) and crest which will display the image with the only the crest. If default, crest or null, the following parameters will be ignored. See icon.
separator boolean If true, a separator between the logo and title will be displayed. Default values are false (boolean), true (boolean) or null.

Options for icon

Name Type Description
height number or false (boolean) This is the height of the header image. Default value is 50.
width number This is the width of the header image. Required if 'src' is a string.
alt string or false (boolean) The text that displays in the image alt. Default values are false (boolean) or null (returns a blank alt). If 'title' is provided, the 'icon' is default or if no other parameters within icon information are set, this 'alt' parameter will be ignored.
source string or false (boolean) The image url. Default values are 'default', false (boolean) or null. Note; 'default', false (boolean) or null will return the default image. To use additional webp or srcset use sources parameters. If sources are correct, this source parameter will be ignored.
sources array or false (boolean) Array of image urls all needed to create the srcsets options within the picture element. Default values are false (boolean) or null. If false (boolean), the following parameters will be ignored. jpgpx1 is required with either; jpgpx2 for retina image srcset or webpx1 for a webp picture with srcsets. If all options are present then a picture element will be present with all options available. See sources.

Options for sources

Name Type Description
jpgpx1 string Required. The url for 1x pixel density for a jpg or jpeg format image. If this is the only source, the image can be a retina image 2:1.
jpgpx2 string The url for 2x pixel density for a jpg or jpeg format image.
webpx1 string The url for 1x pixel density for a webp format image.
webpx2 string The url for 2x pixel density for a webp format image.

Options for menu

Name Type Description
href string Required. The URL of menu item.
text string Required. The text of menu item.
Name Type Description
form array or false (boolean) A list of additional attributes for the form. Common attribute names for form are action, id and method. See form.
label string of false (boolean) If present this will
input array or false (boolean) A list of additional attributes for the input. Common attribute names for input are placeholder and value. See input.

Options for form

Name Type Description
name string Required. The name of the attribute.
value string The value of the attribute. Note, boolean values must be strings. Default values are false (boolean) or null.

Options for input

Name Type Description
name string Required. The name of the attribute.
value string The value of the attribute. Note, boolean values must be strings. Default values are false (boolean) or null.

Options for account

Name Type Description
name string Name of person logged in account.
logout string or false (boolean) The URL of the logout page. 
{% from "components/header/macro.njk" import aspHeader %}


{{ aspHeader({
  app: {
    title: "Service name",
    href: "#",
    icon: "crest",
    separator: true
  },
  menu: [
    {
      text: "New record",
      href: "#"
    },
    {
      text: "Search records",
      href: "#"
    },
    {
      text: "Reports",
      href: "#"
    }
  ],
  account: {
    name: "Christopher King (4321)"
  }
}) }}

Open this example in a new tab: header

<header class="asp-header">
  <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/147/img/asp-crest-with-text.svg" height="50" width="264" alt="Avon and Somerset Police">
      </a>
    </div>
  </div>
      <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>
</header>
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Name Type Description
app object Required. Object of app information. At least several parameters are required. See app.
menu array A list of menu links. See menu.
search array or false (boolean) If true, search will show. The array below can be built up to customise search settings. At least one paramater is required. See search.
account array or false (boolean) An array of account settings. At least one parameter is required. See account.

Options for app

Name Type Description
title string or false (boolean) The title of the app.
href string Required. The URL that the image and title will link to.
icon array, string or null An array of icon information. At least several parameters are required. Default values are default or null which will display the formation / citizen site logo (crest with text) and crest which will display the image with the only the crest. If default, crest or null, the following parameters will be ignored. See icon.
separator boolean If true, a separator between the logo and title will be displayed. Default values are false (boolean), true (boolean) or null.

Options for icon

Name Type Description
height number or false (boolean) This is the height of the header image. Default value is 50.
width number This is the width of the header image. Required if 'src' is a string.
alt string or false (boolean) The text that displays in the image alt. Default values are false (boolean) or null (returns a blank alt). If 'title' is provided, the 'icon' is default or if no other parameters within icon information are set, this 'alt' parameter will be ignored.
source string or false (boolean) The image url. Default values are 'default', false (boolean) or null. Note; 'default', false (boolean) or null will return the default image. To use additional webp or srcset use sources parameters. If sources are correct, this source parameter will be ignored.
sources array or false (boolean) Array of image urls all needed to create the srcsets options within the picture element. Default values are false (boolean) or null. If false (boolean), the following parameters will be ignored. jpgpx1 is required with either; jpgpx2 for retina image srcset or webpx1 for a webp picture with srcsets. If all options are present then a picture element will be present with all options available. See sources.

Options for sources

Name Type Description
jpgpx1 string Required. The url for 1x pixel density for a jpg or jpeg format image. If this is the only source, the image can be a retina image 2:1.
jpgpx2 string The url for 2x pixel density for a jpg or jpeg format image.
webpx1 string The url for 1x pixel density for a webp format image.
webpx2 string The url for 2x pixel density for a webp format image.

Options for menu

Name Type Description
href string Required. The URL of menu item.
text string Required. The text of menu item.
Name Type Description
form array or false (boolean) A list of additional attributes for the form. Common attribute names for form are action, id and method. See form.
label string of false (boolean) If present this will
input array or false (boolean) A list of additional attributes for the input. Common attribute names for input are placeholder and value. See input.

Options for form

Name Type Description
name string Required. The name of the attribute.
value string The value of the attribute. Note, boolean values must be strings. Default values are false (boolean) or null.

Options for input

Name Type Description
name string Required. The name of the attribute.
value string The value of the attribute. Note, boolean values must be strings. Default values are false (boolean) or null.

Options for account

Name Type Description
name string Name of person logged in account.
logout string or false (boolean) The URL of the logout page. 
{% from "components/header/macro.njk" import aspHeader %}


{{ aspHeader({
  app: {
    href: "#",
    icon: "default"
  },
  search: true
}) }}
Twig macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Name Type Description
app object Required. Object of app information. At least several parameters are required. See app.
menu array A list of menu links. See menu.
search array or false (boolean) If true, search will show. The array below can be built up to customise search settings. At least one paramater is required. See search.
account array or false (boolean) An array of account settings. At least one parameter is required. See account.

Options for app

Name Type Description
title string or false (boolean) The title of the app.
href string Required. The URL that the image and title will link to.
icon array, string or null An array of icon information. At least several parameters are required. Default values are default or null which will display the formation / citizen site logo (crest with text) and crest which will display the image with the only the crest. If default, crest or null, the following parameters will be ignored. See icon.
separator boolean If true, a separator between the logo and title will be displayed. Default values are false (boolean), true (boolean) or null.

Options for icon

Name Type Description
height number or false (boolean) This is the height of the header image. Default value is 50.
width number This is the width of the header image. Required if 'src' is a string.
alt string or false (boolean) The text that displays in the image alt. Default values are false (boolean) or null (returns a blank alt). If 'title' is provided, the 'icon' is default or if no other parameters within icon information are set, this 'alt' parameter will be ignored.
source string or false (boolean) The image url. Default values are 'default', false (boolean) or null. Note; 'default', false (boolean) or null will return the default image. To use additional webp or srcset use sources parameters. If sources are correct, this source parameter will be ignored.
sources array or false (boolean) Array of image urls all needed to create the srcsets options within the picture element. Default values are false (boolean) or null. If false (boolean), the following parameters will be ignored. jpgpx1 is required with either; jpgpx2 for retina image srcset or webpx1 for a webp picture with srcsets. If all options are present then a picture element will be present with all options available. See sources.

Options for sources

Name Type Description
jpgpx1 string Required. The url for 1x pixel density for a jpg or jpeg format image. If this is the only source, the image can be a retina image 2:1.
jpgpx2 string The url for 2x pixel density for a jpg or jpeg format image.
webpx1 string The url for 1x pixel density for a webp format image.
webpx2 string The url for 2x pixel density for a webp format image.

Options for menu

Name Type Description
href string Required. The URL of menu item.
text string Required. The text of menu item.
Name Type Description
form array or false (boolean) A list of additional attributes for the form. Common attribute names for form are action, id and method. See form.
label string of false (boolean) If present this will
input array or false (boolean) A list of additional attributes for the input. Common attribute names for input are placeholder and value. See input.

Options for form

Name Type Description
name string Required. The name of the attribute.
value string The value of the attribute. Note, boolean values must be strings. Default values are false (boolean) or null.

Options for input

Name Type Description
name string Required. The name of the attribute.
value string The value of the attribute. Note, boolean values must be strings. Default values are false (boolean) or null.

Options for account

Name Type Description
name string Name of person logged in account.
logout string or false (boolean) The URL of the logout page. 
{% from "components/header/macro.njk" import aspHeader %}


{{ aspHeader({
  app: {
    href: "#",
    icon: "default"
  },
  search: true
}) }}

When to use this component

Use the Header at the top of every page in your service.

It should consistently be the first element on the page and must always include:

  • The ASP crest or logo

Depending on your service’s requirements, the Header may also include:

  • The service name or application name
  • A primary navigation menu
  • A search function
  • A account section
  • A mobile menu toggle for responsive layouts

All services should use the header component to ensure a consistent user experience.

Example of where we have used this component

This component is used on:

  • Formation
  • Assure
  • Allocate
  • EBIT

This list is not exhaustive.

Status of development

The below criteria all need to be met for a component to be considered as fully developed for use within the ASP Digital Design System.

Development criteria Status
WCAG 2.2 compliant Not started
WCAG 2.1 compliant Completed
HTML / Nunjucks version Completed
Figma version Not started
M365 versions Not started
Documentation In progress

Make a change to the Design System

Suggest an edit to this system, or any of the components in it, by submitting a Design System change request.

Published 14 April 2025
Last updated 13 November 2025