Skip to main content

Options

Customise the appearance and behaviour 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',
    }
  })
}
Plugin options
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 false).
homeKey string

First item in pagination and key to use when referring to the home page for eleventyNavigation.parent (default is ‘Home’).
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 {dir.input}/sass/_settings.scss).
showBreadcrumbs boolean

Show breadcrumb navigation (default is true with nested pages).
stylesheets Array Additional stylesheets to load after application styles.
themeColour string

Browser theme colour. Must be a hex value, i.e. #0b0c0c
titleSuffix string or boolean

Value to show at the end of the document title (default is GOV.UK).
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 html is set, this is not required. If html is provided, the text option will be ignored.
logotype.html string

If text is set, this is not required. If html is provided, the text option will be ignored.
productName string

Product name that appears after the organisation name (default is false).
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.
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 href attribute.
items[].classes string Classes to add to the navigation item.

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 All content is available under the Open Government Licence v3.0, except where otherwise stated. Set to false to remove completely.
contentLicence.text string

If html is set, this is not required. If html is provided, the text option will be ignored.
contentLicence.html string

If text is set, this is not required. If html is provided, the text option will be ignored.
copyright object

Copyright statement. If no value is provided, © Crown copyright is displayed below an image of the Royal Coat of Arms. Set to false to remove completely.
copyright.text string

If html is set, this is not required. If html is provided, the text option will be ignored.
copyright.html string

If text is set, this is not required. If html is provided, the text option will be ignored.