Work in progress
This page is a design preview. It may not contain the latest guidance and may not behave as expected.
Current guidance can always be found at design-system.dwp.gov.uk.
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 |
---|---|---|
homepageUrl | string | The URL of the homepage. Defaults to `"/"`. |
serviceName | string | The name of your service, included in the header. |
serviceUrl | string | URL for the service name anchor. |
disableStickyHeader | boolean | Removes the class to make the header sticky. |
navigation | array | Can be used to add navigation to the header component., see navigation |
navigationClasses | string | Classes for the navigation section of the header. |
navigationLabel | string | Text for the `aria-label` attribute of the navigation. Defaults to the same value as `menuButtonText`. |
menuButtonLabel | string | Text for the `aria-label` attribute of the button that opens the mobile navigation, if there is a mobile navigation menu. |
menuButtonText | string | Text of the button that opens the mobile navigation menu, if there is a mobile navigation menu. There is no enforced character limit, but there is a limited display space so keep text as short as possible. By default, this is set to 'Menu'. |
containerClasses | string | Classes for the container, useful if you want to make the header fixed width. |
classes | string | Classes to add to the header HTML element. |
attributes | object | HTML attributes (for example data attributes) to add to the header HTML element. |
action | string | the action of a link |
actionUrl | string | The action url |
profileName | string | The name of the person signed-in. |
Name | Type | Description |
---|---|---|
text | string | Required. Text for the navigation item. If `html` is provided, the `text` option will be ignored. |
html | string | Required. HTML for the navigation item. If `html` is provided, the `text` option will be ignored. |
href | string | URL of the navigation item anchor. |
active | boolean | Flag to mark the navigation item as active or not. |
attributes | object | HTML attributes (for example data attributes) to add to the navigation item anchor. |
opensInNewWindow | boolean | To determine whether or not a link opens in a new window. |