Options
The plugin has a number of options that allow you to customise the appearance of your website.
You can add options to the second parameter of the addPlugin
function in Eleventy config file.
For example, to add a product name to the right of the GOV.UK text in the header, you would add the following:
const govukEleventyPlugin = require('@x-govuk/govuk-eleventy-plugin')
module.exports = function(eleventyConfig) {
eleventyConfig.addPlugin(govukEleventyPlugin, {
header: {
productName: 'Apply for a juggling licence',
}
})
}
Name | Type | Description |
---|---|---|
icons | object | Override GOV.UK icons. |
icons.mask | string | Override GOV.UK SVG mask icon. |
icons.shortcut | string | Override GOV.UK favicon. |
icons.touch | string | Override GOV.UK touch icon. |
opengraphImageUrl | string | URL for default Open Graph share image. |
headingPermalinks | boolean | Add links to headings, making it easier to share sections of a page (default is |
homeKey | string | First item in pagination and key to use when referring to the home page for |
parentSite | object | Website to show as first item in breadcrumbs. |
parentSite.url | string | URL for parent site. |
parentSite.name | string | Name of parent site. |
scssSettingsPath | string | Path to SCSS file, relative to input directory, containing GOV.UK Frontend settings (default is |
stylesheets | Array | Additional stylesheets to load after application styles. |
themeColour | string | Browser theme colour. Must be a hex value, i.e. |
url | string | The URL of your website. Optional, but required to have valid canonical URLs in Open Graph meta data. |
header | object | See header options. |
navigation | object | See navigation options. |
footer | object | See footer options. |
Header options
In addition to the options available for the header component, the following options can also be set for header
:
Name | Type | Description |
---|---|---|
homepageUrl | string | URL organisation name is linked to (default is |
logotype | object | Logo that appears in the header. If no value is provided, the GOV.UK logo is shown. |
logotype.text | string | Text to show instead of the GOV.UK logo. This text will appear bold. If |
logotype.html | string | If |
productName | string | Product name that appears after the organisation name (default is |
search | object | Search box that appears in the header. |
search.label | string | Text to show in the search field (default is ‘Search site’). |
search.indexPath | string | Path to search index file. |
search.sitemapPath | string | Path to sitemap page. |
Navigation options
Name | Type | Description |
---|---|---|
visuallyHiddenTitle | string | Hidden title for navigation. |
items | Array | An array of navigation links to show. |
items[].text | string | Required. Navigation link text. |
items[].href | string | Required. Navigation link |
items[].classes | string | Classes to add to the navigation item. |
Footer options
In addition to the options available for the footer component, the following options can also be set for footer
:
Name | Type | Description |
---|---|---|
contentLicence | object | Licence description. If no value is provided, the OGL logo is shown alongside the words |
contentLicence.text | string | If |
contentLicence.html | string | If |
copyright | object | Copyright statement. If no value is provided, |
copyright.text | string | If |
copyright.html | string | If |