Header with selected navigation item
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 |
---|---|---|
serviceName | string | Required. The service name, this replaces the name value |
serviceHref | string | Required. The service url |
action | string | the action of a button |
actionHref | string | The action url |
container | boolean | Whether to use the govuk width container |
classes | string | Additional classes to add to the internal service header |
containerClasses | string | Additional classes to add to the govuk width container |
attributes | object | HTML Attributes (data attributes) to add to the internal service header |
navigation | object | Navigation options for adding navigation to header component, see navigation |
Options for navigation object
Name | Type | Description |
---|---|---|
attributes | object | HTML Attributes (data attributes) to add to the internal service header |
classes | string | Additional classes to add to the internal service header |
ariaLabel | string | Sets the description of the navigation, by default this is Primary |
selectedItem | string | URL string to highlight selected navigation item |
items | array | Required. Array of object navigation items, see items |
actionItem | object | This moves the action item to the bottom of navigation for mobile |
mobile | object | Object of options to control mobile navigation, see mobile |
Options for items array object
Name | Type | Description |
---|---|---|
text | string | Required. Value for text of the naivigation link |
href | string | Required. Value for the href of the navigation link |
id | string | Value for the id of the navigation link |
Options for mobile object
Name | Type | Description |
---|---|---|
disabled | boolean | Toggle if mobile navigation is disabled |
menuButtonText | string | Sets the label value of the menu button, by default this is Menu |
menuButtonAriaLabel | string | This allows you to give addtional context to the menu button if needed |