GOV.UK Frontend v3.9.0

New features

Add a prefix or suffix to a text input component

You can now use prefixes and suffixes in the text input component to help users enter things like currencies and measurements.

This was added in pull request #1816: Add input prefix and suffix. Thanks to @simonwhatley and the GOV.UK Coronavirus Services Team.

Test if your HTML matches GOV.UK Frontend

You can now use our test fixtures to check you're outputting the same HTML that GOV.UK Frontend uses.

This was added in pull request #1925: Generate fixtures.json files for components on build:package. Thanks to everyone who fed back on our test fixtures proposal.

Customise navigation in the header component

If you use the header component with navigation, you can now:

• customise the section's aria-label text
• add navigation items without links

Customise aria-label text

You can use the new:

• navigationLabel option to set the aria-label text for the navigation section
• menuButtonLabel option to set the aria-label text for the button that hides or shows the navigation section on mobile

For example:

{{ govukHeader({
    navigationLabel: "Custom navigation section aria-label",
    menuButtonLabel: "Custom menu button aria-label"
}) }}

The default labels are now:

• Navigation menu for navigationLabel
• Show or hide navigation menu for menuButtonLabel

This was added in pull requests:

• #1905: Set navigation and mobile menu labels of the header component with new options
• #1943: Change header menu button label - thanks to @domoscargin for raising this issue

Add navigation items without links

To add a navigation item without a link, use the text or html option to add the item but do not use the href option.

For example:

{{ govukHeader({
    navigation: [
    {
      html: "<form method='post' action='url.com'>
              <input type='submit' class='app-logout-button-style' value='Log out' />
            </form>"
    }
  ]
}) }}

This was added in pull request #1921: Make it possible to exclude link from header navigation item.

Fixes

We’ve made fixes to GOV.UK Frontend in the following pull requests:

• #1918: Add new brand colour for FCDO - thanks to @deborahchua and @beccapearce for contributing this
• #1942: Set aria-expanded and aria-hidden attributes on header menu button and menu when page loads
• #1947 Add print styles for the panel component