GOV.UK Frontend v6.0.0-beta.1

Breaking changes

Use the govuk-functional-colour function to access functional (formerly applied) colours in Sass

We've renamed and restructured our applied colours in Sass, and we've changed how you access them in your own code. They are now called functional colours.

If you were using the value of one of the variables in settings/_colours-applied.scss, use the new govuk-functional-colour function to output a var() call referencing the colour.

.a-component {
  // color: $govuk-text-colour
  color: govuk-functional-colour(text);
}

Removed Sass variable	govuk-functional-colour call
$govuk-brand-colour	govuk-functional-colour(brand)
$govuk-text-colour	govuk-functional-colour(text)
$govuk-template-background-colour	govuk-functional-colour(template-background)
$govuk-body-background-colour	govuk-functional-colour(body-background)
$govuk-print-text-colour	govuk-functional-colour(print-text)
$govuk-secondary-text-colour	govuk-functional-colour(secondary-text)
$govuk-focus-colour	govuk-functional-colour(focus)
$govuk-focus-text-colour	govuk-functional-colour(focus-text)
$govuk-error-colour	govuk-functional-colour(error)
$govuk-success-colour	govuk-functional-colour(success)
$govuk-border-colour	govuk-functional-colour(border)
$govuk-input-border-colour	govuk-functional-colour(input-border)
$govuk-hover-colour	govuk-functional-colour(hover)
$govuk-link-colour	govuk-functional-colour(link)
$govuk-link-visited-colour	govuk-functional-colour(link-visited)
$govuk-link-hover-colour	govuk-functional-colour(link-hover)
$govuk-link-active-colour	govuk-functional-colour(link-active)

Although we've now deprecated the Sass variables, they're still available to make your migration easier.
However, if your code was using the Sass variables to do computations using the Sass colour API, a compilation error will occur. This is because the variables now store a Sass string with a var() call, rather than a Sass colour.

Use $govuk-functional-colours to redefine functional (formerly applied) colours

We've restructured our applied colours in Sass. They are now called functional colours, and we've changed the way you redefine them.

If you were redefining a custom value for the functional colour before importing GOV.UK Frontend, you can still do this by assigning a map of the colours you want to change to the $govuk-functional-colours variable.

// This will be merged with the default functional colours of GOV.UK Frontend
// redefining the 'brand' colour to `rebeccapurple`
$govuk-functional-colour: (
  brand: rebeccapurple
);
@import 'pkg:govuk-frontend';

Note that you can only redefine existing functional colours, not add new functional colours. This is to make sure there's a clear separation between colours from GOV.UK Frontend and colours from your own project.

We've ended support for Ruby Sass and LibSass

GOV.UK Frontend no longer supports Ruby Sass or LibSass. You must update your project to Dart Sass to continue using GOV.UK Frontend.

Support for Ruby Sass ended in 2019, and LibSass was deprecated in 2020. A number of Sass implementations, including Node Sass, SassC and sass-rs, are dependent upon LibSass. GOV.UK Frontend no longer supports these implementations.

The Sass developers have provided guides for:

• migrating from Ruby Sass to Dart Sass
• migrating from LibSass to Dart Sass

We made this change in pull request #6311: Remove support for Ruby Sass and LibSass.

We've set our minimum Dart Sass version to 1.79

GOV.UK Frontend will no longer support services using Dart Sass versions earlier than 1.79. If you're using an earlier version of Dart Sass, your service's Sass may break, as GOV.UK Frontend may use features in Dart Sass that are not available in earlier versions.

If you're using an earlier version of Dart Sass than 1.79, see the Dart Sass releases and follow their release notes to upgrade to version 1.79 or later to continue using GOV.UK Frontend.

We made this change in pull request #6366: Update Dart Sass tests minimum version to 1.79.0.

Update references to govuk-pagination__item--ellipses class from the HTML for the Pagination component

We deprecated the govuk-pagination__item--ellipses class in GOV.UK Frontend 5.13.0, and we've now removed it.

If you're not using Nunjucks macros, you should update instances of this class to use the govuk-pagination__item--ellipsis class instead.

If you're using Nunjucks macros, you don't need to change anything.

We made this change in pull request #6382: Remove deprecated govuk-pagination__item--ellipses class.

Update the class on the GOV.UK logo link in the Header component

We've updated the value of the class attribute on the link to the GOV.UK homepage to govuk-header__homepage-link.

If you're not using Nunjucks macros, you'll need to update this class manually.

<!-- Before -->
<a href="//gov.uk" class="govuk-header__link govuk-header__link--homepage">
  [...]
</a>

<!-- After -->
<a href="//gov.uk" class="govuk-header__homepage-link">
  [...]
</a>

We made this change in pull request #6423: Remove service name and navigation from Header component.

Stop including the service name and navigation items in the Header component

We deprecated including the service name and navigation in the Header in GOV.UK Frontend 5.9.0.

We've now removed this functionality.

Service names and service-level navigation should now use the Service navigation component.

We made this change in pull request #6423: Remove service name and navigation from Header component.

Stop importing GOV.UK Frontend's Sass using all

We deprecated GOV.UK Frontend's all.scss file and partials in GOV.UK Frontend 5.8.0 and replaced them with equivalent Sass index files. We've now removed the all.scss files entirely.

With the move to Dart Sass, you can now simplify how you import Sass from GOV.UK Frontend.

// Before
@import "govuk/all";
@import "govuk/components/all"

// After
@import "govuk";
@import "govuk/components"

We made this change in pull request #6412: Remove all.scss file and partials.

Update to the new organisation colour palette

We updated the organisation colour palette in GOV.UK Frontend 5.9.0.

The new palette was initially opt-in using the $govuk-new-organisation-colours feature flag. The updated palette is now the only palette available, so you can remove the feature flag from your code.

As part of this work, we removed the deprecated $websafe parameter of the govuk-organisation-colour function. Use the $contrast-safe parameter when calling the function instead.

We made this change in pull request #6390: Remove legacy organisation colour palette.

Update references to deprecated organisations in the organisation colour palette

We've removed deprecated organisations from the organisation colour palette. These organisations had ceased to exist or had been renamed prior to the start of 2025.

We made this change in pull request #6426: Remove deprecated organisation colours.

Stop using the govuk-responsive-typography Sass mixin

We renamed the govuk-responsive-typography Sass mixin to govuk-font-size in GOV.UK Frontend 5.1.0. We've now removed the previous name entirely.

We made this change in pull request #6387: Remove govuk-responsive-typography mixin.

Stop using the --govuk-frontend-breakpoint CSS custom properties

We renamed CSS custom properties starting --govuk-frontend-breakpoint to begin with --govuk-breakpoint in GOV.UK Frontend 5.11.0. We've now removed the previous names for these properties.

We made this change in [pull request #6385: Remove `--govuk-frontend-breakpoint...

GOV.UK Frontend v6.0.0-beta.0

To install this version with npm, run npm install [email protected]. You can also find more information about how to stay up to date in our documentation.

Breaking changes

Use GOV.UK brand colours

We’ve updated GOV.UK Frontend to use the web palette defined by the GOV.UK Brand guidelines, as well as the 25% and 50% shades when they exist for a given colour.

Check your service’s colours

Our components now use the colours of the GOV.UK web palette. If you’re using any custom colours, you’ll need to make sure they still work well with the new web palette in terms of accessibility and design. If possible, you should use the GOV.UK brand colours instead.

Use the govuk-colour function to access GOV.UK brand colours

You can use the govuk-colour function to fetch colours from the GOV.UK web palette. This function allows you to access both primary colours and their variants, such as tints and shades.

When the function receives only the colour name, it’ll return the primary variant of that colour. For example:

$app-colour: govuk-colour('blue'); // Returns the ‘Primary blue’ colour

Use the new $variant parameter of the govuk-colour function to access the tints and shades of a colour defined by the GOV.UK brand.

$component-colour: govuk-colour('red', $variant: 'tint-25') // Returns the “Red tint 25%” colour
$other-component-colour: govuk-colour('green', $variant: 'shade-50') // Returns the “Green shade 50%” colour

You can find the list of possible colour names in the GOV.UK brand guidelines.

If you’re already using the govuk-colour function

If you’re already using the govuk-colour function in your project, colours from the GOV.UK web palette will now be applied automatically when you call the function.

If the colour name exists in the GOV.UK web palette, the function returns the primary variant for that colour. The colour remains the same for‘blue, yellow and orange, but the following colours will see a slight change:

Colour	Old colour hex	New colour hex
green	#00703c	#11875a
red	#d4351c	#ca3535
purple	#4c2c92	#54319f
brown	#b58840	#99704a

Some of the GOV.UK brand colours are slightly different from the colours that were returned by govuk-colour before GOV.UK Frontend v6.0. That means you’ll need to check that the colours still work correctly where you applied them in your project, in terms of accessibility and design.

To make it easier to upgrade, in cases where a colour name does not exist in the GOV.UK brand palette (for example, bright-purple), the function will return the closest colour from the GOV.UK brand palette but produce a deprecation warning. We recommend that you update your calls to govuk-colour with deprecated colour names to use a colour from the GOV.UK brand, such as the one suggested in the deprecation warning message.

govuk-colour now maps colour names that no longer exist from the old palette to the new palette, as described in the following table. You can use this list to assess and update your use of govuk-colour.

Old colour name	Old colour hex	New colour name	New colour hex
light-pink	#f499be	Magenta tint 50%	#e59abe
pink	#d53880	Primary magenta	#ca357c
light-green	#85994b	Green tint 25%	#4da583
turquoise	#28a197	Primary teal	#158187
light-blue	#5694ca	Blue tint 25%	#5694ca
dark-blue	#003078	Blue shade 50%	#0f385c
light-purple	#6f72af	Purple tint 25%	#7f65b7
bright-purple	#912b88	Magenta shade 25%	#98285d
dark-grey	#505a5f	Black tint 25%	#484949
mid-grey	#b1b4b6	Black tint 80%	#cecece
light-grey	#f3f2f1	Black tint 95%	#f3f3f3

If you’re using the $govuk-colours variable

We’ve removed the $govuk-colours variable from GOV.UK Frontend, to only allow access to the colours through the govuk-colour function.

If you were accessing the GOV.UK Frontend colours with map-get($govuk-colours, <COLOUR_NAME>), you’ll now need to use govuk-colour(<COLOUR_NAME>).

We made these changes in the following pull requests:

• #6326: Use brand palette through govuk-colour
• #6335: Update button colours to use govuk_palette
• #6336: Update tag colours to use govuk_palette
• #6337: Update file upload colours to use govuk_palette

Stop using the $legacy parameter in the govuk-colour function

We’ve removed the $legacy parameter of the govuk-colour function, so you should remove any usage of it.

We made this change in pull request #6326: Use brand palette through govuk-colour.

Stop using govuk-tint and govuk-shade

The govuk-tint and govuk-shade functions for applying tints and shades to colours by percentage are now deprecated and no longer work. They now only return the colour you pass to them, as well as a Sass warning. We’ll remove the govuk-tint and govuk-shade functions in the final release of 6.0.0.

We recommend replacing them with tints and shades from the new GOV.UK colour palette that are as close as possible to your existing implementation.

We made this change in pull request #6341: Deactivate govuk-tint and govuk-shade functions.

Fixes

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

• #6338: Fix hover state on focused small radios

GOV.UK Frontend v5.13.0

To install this version with npm, run npm install [email protected]. You can also find more information about how to stay up to date in our documentation.

New features

Use Sass functions to create custom media queries

We've added new Sass functions to help write @media and @container queries, mixins and functions whilst still using GOV.UK Frontend's $govuk-breakpoints setting.

You can create min-width and max-width queries using the govuk-from-breakpoint and govuk-until-breakpoint functions:

.element {
  color: red;

  @media #{govuk-from-breakpoint(mobile)} and #{govuk-until-breakpoint(desktop)} {
    color: blue;
  }
}

You can get the configured value of a breakpoint using govuk-breakpoint-value:

@function wider-than-tablet($width) {
  @return $width > govuk-breakpoint-value(tablet);
}

Each of these functions allows for passing a custom breakpoint map. This can be useful if a particular component needs to change layout at different dimensions to the rest of the site and for authoring @container queries.

$component-breakpoints: (
  small: 300px,
  medium: 500px,
  large: 750px
);

.element {
  color: red;

  @container #{govuk-from-breakpoint(small, $component-breakpoints)} {
    color: blue;
  }
}

We've rewritten the internals of the govuk-media-query mixin to make use of these new functions. The rewritten mixin should work identically and return the same CSS as the previous version, but you may want to make sure that your existing media queries work as expected.

We made these changes in the following pull requests:

• #6264: Add media query functions.
• #6265: Rewrite govuk-media-query, remove dependency on sass-mq.

Recommended changes

Rename ellipses HTML class in pagination to ellipsis

Within the pagination component, change the govuk-pagination__item--ellipses class to govuk-pagination__item--ellipsis.

We introduced this change in pull request #5882: Rename ellipses html class to ellipsis. Thanks to @frankieroberto for making this change.

Fixes

• #6223: Account for multiple attribute when enhancing a File Input. Thanks to @deberny for reporting this issue.
• #6297: Output deprecation warning if $govuk-show-breakpoints is true
• #6304: Fix long filenames in enhanced file upload not wrapping. Thanks to @wardt7 for reporting this issue.

GOV.UK Frontend v5.12.0

To install this version with npm, run npm install [email protected]. You can also find more information about how to stay up to date in our documentation.

New features

Use the govuk-focused-form-input mixin to style focus states for form inputs

You can now use the govuk-focused-form-input mixin to style the focus state in your own form input components.

Thanks to @patrickpatrickpatrick for suggesting this change.

Fixes

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

• #6222: Fall back to the 'other' translation in older browsers that do not support Intl.PluralRules and remove fallback logic
• #6232: Remove fieldset indentation from checkboxes and radios – thanks to @RichardBradley, @devkokov and @nathdolan for reporting this issue

GOV.UK Frontend v5.11.2

To install this version with npm, run npm install [email protected]. You can also find more information about how to stay up to date in our documentation.

Fixes

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

• #6138: Fix file upload being invisible when using the 'JavaScript enhanced' version with an empty label – thanks to @JoPintoPaul for reporting this issue
• #6164: Fix handling of scope being null when calling createAll() or initAll() – thanks to @colinrotherham for reporting and fixing this issue
• #6184: Fix thickness of underlines on previous and next pagination links in Safari – thanks to @frankieroberto for reporting this issue

GOV.UK Frontend v5.11.1

To install this version with npm, run npm install [email protected]. You can also find more information about how to stay up to date in our documentation.

Fixes

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

• #6047: Fix text within the inverse Service navigation variant not appearing in white – thanks to @peteryates for reporting this issue
• #6084: Output hexadecimal colours for govuk-shade and govuk-tint

GOV.UK Frontend v5.11.0

To install this version with npm, run npm install [email protected]. You can also find more information about how to stay up to date in our documentation.

New features

The Service navigation component no longer uses a menu on mobile for a single link

If you're using our Nunjucks macros, the Service navigation component will no longer collapse the navigation behind a Menu toggle on mobile if there's only one navigation link.

You can control this behaviour using the new collapseNavigationOnMobile Nunjucks option.

If you're not using our Nunjucks macros, you can recreate this behaviour by omitting the Menu <button> element when there is only one navigation item.

We made this change in pull request #6016: Don’t use menu for service nav with a single link.

Add inverse styling to Service navigation for use on product pages

If you enable the GOV.UK rebrand, you can now add the govuk-service-navigation--inverse class to the Service navigation component to use white links on a blue background.

This allows the rebranded GOV.UK header and Service navigation components to flow seamlessly with any following components that have a blue background, as is common on GOV.UK Digital Service Platform pages.

We made this change in pull request #6015: Add inverse variant to Service navigation component.

You'll now see a deprecation warning if you're using LibSass

If you're using the deprecated LibSass library, you'll now see this deprecation warning when compiling your Sass:

It looks like you may be using LibSass to compile your Sass. LibSass is deprecated and will not be supported by the next major version of GOV.UK Frontend. See https://sass-lang.com/libsass/ for more information. To silence this warning, update $govuk-suppressed-warnings with key: "libsass"

We made this change in pull request #5993: Warn if Sass is compiled using libsass.

Deprecated features

Replace references to CSS custom properties for breakpoints

We've renamed the CSS custom properties for breakpoints to simplify the prefix from --govuk-frontend to just --govuk.

Old name	New name
--govuk-frontend-breakpoint-mobile	--govuk-breakpoint-mobile
--govuk-frontend-breakpoint-tablet	--govuk-breakpoint-tablet
--govuk-frontend-breakpoint-desktop	--govuk-breakpoint-desktop

You can still use the old names, but we'll remove them in the next breaking release (GOV.UK Frontend v6.0.0).

We made this change in pull request #6014: Simplify prefix for breakpoint custom properties.

Fixes

We've updated the SVG (Scalable Vector Graphics) file of the GOV.UK logo to fix some imperfections visible at high zoom levels. Thanks to @matteason for reporting this.

If you're using the govukHeader Nunjucks macro, you do not need to update anything. If you're not using the macro, replace the logo's SVG code in the header with the following code:

<svg
  focusable="false"
  role="img"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 324 60"
  height="30"
  width="162"
  fill="currentcolor"
  class="govuk-header__logotype"
  aria-label="GOV.UK">
  <title>GOV.UK</title>
  <g>
    <circle cx="20" cy="17.6" r="3.7"></circle>
    <circle cx="10.2" cy="23.5" r="3.7"></circle>
    <circle cx="3.7" cy="33.2" r="3.7"></circle>
    <circle cx="31.7" cy="30.6" r="3.7"></circle>
    <circle cx="43.3" cy="17.6" r="3.7"></circle>
    <circle cx="53.2" cy="23.5" r="3.7"></circle>
    <circle cx="59.7" cy="33.2" r="3.7"></circle>
    <circle cx="31.7" cy="30.6" r="3.7"></circle>
    <path d="M33.1,9.8c.2-.1.3-.3.5-.5l4.6,2.4v-6.8l-4.6,1.5c-.1-.2-.3-.3-.5-.5l1.9-5.9h-6.7l1.9,5.9c-.2.1-.3.3-.5.5l-4.6-1.5v6.8l4.6-2.4c.1.2.3.3.5.5l-2.6,8c-.9,2.8,1.2,5.7,4.1,5.7h0c3,0,5.1-2.9,4.1-5.7l-2.6-8ZM37,37.9s-3.4,3.8-4.1,6.1c2.2,0,4.2-.5,6.4-2.8l-.7,8.5c-2-2.8-4.4-4.1-5.7-3.8.1,3.1.5,6.7,5.8,7.2,3.7.3,6.7-1.5,7-3.8.4-2.6-2-4.3-3.7-1.6-1.4-4.5,2.4-6.1,4.9-3.2-1.9-4.5-1.8-7.7,2.4-10.9,3,4,2.6,7.3-1.2,11.1,2.4-1.3,6.2,0,4,4.6-1.2-2.8-3.7-2.2-4.2.2-.3,1.7.7,3.7,3,4.2,1.9.3,4.7-.9,7-5.9-1.3,0-2.4.7-3.9,1.7l2.4-8c.6,2.3,1.4,3.7,2.2,4.5.6-1.6.5-2.8,0-5.3l5,1.8c-2.6,3.6-5.2,8.7-7.3,17.5-7.4-1.1-15.7-1.7-24.5-1.7h0c-8.8,0-17.1.6-24.5,1.7-2.1-8.9-4.7-13.9-7.3-17.5l5-1.8c-.5,2.5-.6,3.7,0,5.3.8-.8,1.6-2.3,2.2-4.5l2.4,8c-1.5-1-2.6-1.7-3.9-1.7,2.3,5,5.2,6.2,7,5.9,2.3-.4,3.3-2.4,3-4.2-.5-2.4-3-3.1-4.2-.2-2.2-4.6,1.6-6,4-4.6-3.7-3.7-4.2-7.1-1.2-11.1,4.2,3.2,4.3,6.4,2.4,10.9,2.5-2.8,6.3-1.3,4.9,3.2-1.8-2.7-4.1-1-3.7,1.6.3,2.3,3.3,4.1,7,3.8,5.4-.5,5.7-4.2,5.8-7.2-1.3-.2-3.7,1-5.7,3.8l-.7-8.5c2.2,2.3,4.2,2.7,6.4,2.8-.7-2.3-4.1-6.1-4.1-6.1h10.6,0Z"></path>
  </g>
  <circle class="govuk-logo-dot" cx="226" cy="36" r="7.3"></circle>
  <path d="M93.94 41.25c.4 1.81 1.2 3.21 2.21 4.62 1 1.4 2.21 2.41 3.61 3.21s3.21 1.2 5.22 1.2 3.61-.4 4.82-1c1.4-.6 2.41-1.4 3.21-2.41.8-1 1.4-2.01 1.61-3.01s.4-2.01.4-3.01v.14h-10.86v-7.02h20.07v24.08h-8.03v-5.56c-.6.8-1.38 1.61-2.19 2.41-.8.8-1.81 1.2-2.81 1.81-1 .4-2.21.8-3.41 1.2s-2.41.4-3.81.4a18.56 18.56 0 0 1-14.65-6.63c-1.6-2.01-3.01-4.41-3.81-7.02s-1.4-5.62-1.4-8.83.4-6.02 1.4-8.83a20.45 20.45 0 0 1 19.46-13.65c3.21 0 4.01.2 5.82.8 1.81.4 3.61 1.2 5.02 2.01 1.61.8 2.81 2.01 4.01 3.21s2.21 2.61 2.81 4.21l-7.63 4.41c-.4-1-1-1.81-1.61-2.61-.6-.8-1.4-1.4-2.21-2.01-.8-.6-1.81-1-2.81-1.4-1-.4-2.21-.4-3.61-.4-2.01 0-3.81.4-5.22 1.2-1.4.8-2.61 1.81-3.61 3.21s-1.61 2.81-2.21 4.62c-.4 1.81-.6 3.71-.6 5.42s.8 5.22.8 5.22Zm57.8-27.9c3.21 0 6.22.6 8.63 1.81 2.41 1.2 4.82 2.81 6.62 4.82S170.2 24.39 171 27s1.4 5.62 1.4 8.83-.4 6.02-1.4 8.83-2.41 5.02-4.01 7.02-4.01 3.61-6.62 4.82-5.42 1.81-8.63 1.81-6.22-.6-8.63-1.81-4.82-2.81-6.42-4.82-3.21-4.41-4.01-7.02-1.4-5.62-1.4-8.83.4-6.02 1.4-8.83 2.41-5.02 4.01-7.02 4.01-3.61 6.42-4.82 5.42-1.81 8.63-1.81Zm0 36.73c1.81 0 3.61-.4 5.02-1s2.61-1.81 3.61-3.01 1.81-2.81 2.21-4.41c.4-1.81.8-3.61.8-5.62 0-2.21-.2-4.21-.8-6.02s-1.2-3.21-2.21-4.62c-1-1.2-2.21-2.21-3.61-3.01s-3.21-1-5.02-1-3.61.4-5.02 1c-1.4.8-2.61 1.81-3.61 3.01s-1.81 2.81-2.21 4.62c-.4 1.81-.8 3.61-.8 5.62 0 2.41.2 4.21.8 6.02.4 1.81 1.2 3.21 2.21 4.41s2.21 2.21 3.61 3.01c1.4.8 3.21 1 5.02 1Zm36.32 7.96-12.24-44.15h9.83l8.43 32.77h.4l8.23-32.77h9.83L200.3 58.04h-12.24Zm74.14-7.96c2.18 0 3.51-.6 3.51-.6 1.2-.6 2.01-1 2.81-1.81s1.4-1.81 1.81-2.81a13 13 0 0 0 .8-4.01V13.9h8.63v28.15c0 2.41-.4 4.62-1.4 6.62-.8 2.01-2.21 3.61-3.61 5.02s-3.41 2.41-5.62 3.21-4.62 1.2-7.02 1.2-5.02-.4-7.02-1.2c-2.21-.8-4.01-1.81-5.62-3.21s-2.81-3.01-3.61-5.02-1.4-4.21-1.4-6.62V13.9h8.63v26.95c0 1.61.2 3.01.8 4.01.4 1.2 1.2 2.21 2.01 2.81.8.8 1.81 1.4 2.81 1.81 0 0 1.34.6 3.51.6Zm34.22-36.18v18.92l15.65-18.92h10.82l-15.03 17.32 16.03 26.83h-10.21l-11.44-20.21-5.62 6.22v13.99h-8.83V13.9"></path>
</svg>

We made this change in pull request #6036: Fix some wordmark artifacts at high zoom levels.

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

• #6011: Derive rebranded tints from $govuk-brand-colour – thanks to @tamoreton for proposing this change
• #6018: Fix layout of Service navigation in Edge when forced colours are enabled
• #6019: Fix service nav wrapper not filling available width – thanks to @joelanman for reporting and fixing this issue

GOV.UK Frontend v4.10.1

To install this version with npm, run npm install [email protected]. You can also find more information about how to stay up to date in our documentation.

Fixes

We've updated the SVG (Scalable Vector Graphics) file of the GOV.UK logo to fix some imperfections visible at high zoom levels. Thanks to @matteason for reporting this.

If you're using the govukHeader Nunjucks macro, you do not need to update anything. If you're not using the macro, replace the logo's SVG code in the header with the following code:

<svg
  focusable="false"
  role="img"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 324 60"
  height="30"
  width="162"
  fill="currentcolor"
  class="govuk-header__logotype"
  aria-label="GOV.UK">
  <title>GOV.UK</title>
  <g>
    <circle cx="20" cy="17.6" r="3.7"></circle>
    <circle cx="10.2" cy="23.5" r="3.7"></circle>
    <circle cx="3.7" cy="33.2" r="3.7"></circle>
    <circle cx="31.7" cy="30.6" r="3.7"></circle>
    <circle cx="43.3" cy="17.6" r="3.7"></circle>
    <circle cx="53.2" cy="23.5" r="3.7"></circle>
    <circle cx="59.7" cy="33.2" r="3.7"></circle>
    <circle cx="31.7" cy="30.6" r="3.7"></circle>
    <path d="M33.1,9.8c.2-.1.3-.3.5-.5l4.6,2.4v-6.8l-4.6,1.5c-.1-.2-.3-.3-.5-.5l1.9-5.9h-6.7l1.9,5.9c-.2.1-.3.3-.5.5l-4.6-1.5v6.8l4.6-2.4c.1.2.3.3.5.5l-2.6,8c-.9,2.8,1.2,5.7,4.1,5.7h0c3,0,5.1-2.9,4.1-5.7l-2.6-8ZM37,37.9s-3.4,3.8-4.1,6.1c2.2,0,4.2-.5,6.4-2.8l-.7,8.5c-2-2.8-4.4-4.1-5.7-3.8.1,3.1.5,6.7,5.8,7.2,3.7.3,6.7-1.5,7-3.8.4-2.6-2-4.3-3.7-1.6-1.4-4.5,2.4-6.1,4.9-3.2-1.9-4.5-1.8-7.7,2.4-10.9,3,4,2.6,7.3-1.2,11.1,2.4-1.3,6.2,0,4,4.6-1.2-2.8-3.7-2.2-4.2.2-.3,1.7.7,3.7,3,4.2,1.9.3,4.7-.9,7-5.9-1.3,0-2.4.7-3.9,1.7l2.4-8c.6,2.3,1.4,3.7,2.2,4.5.6-1.6.5-2.8,0-5.3l5,1.8c-2.6,3.6-5.2,8.7-7.3,17.5-7.4-1.1-15.7-1.7-24.5-1.7h0c-8.8,0-17.1.6-24.5,1.7-2.1-8.9-4.7-13.9-7.3-17.5l5-1.8c-.5,2.5-.6,3.7,0,5.3.8-.8,1.6-2.3,2.2-4.5l2.4,8c-1.5-1-2.6-1.7-3.9-1.7,2.3,5,5.2,6.2,7,5.9,2.3-.4,3.3-2.4,3-4.2-.5-2.4-3-3.1-4.2-.2-2.2-4.6,1.6-6,4-4.6-3.7-3.7-4.2-7.1-1.2-11.1,4.2,3.2,4.3,6.4,2.4,10.9,2.5-2.8,6.3-1.3,4.9,3.2-1.8-2.7-4.1-1-3.7,1.6.3,2.3,3.3,4.1,7,3.8,5.4-.5,5.7-4.2,5.8-7.2-1.3-.2-3.7,1-5.7,3.8l-.7-8.5c2.2,2.3,4.2,2.7,6.4,2.8-.7-2.3-4.1-6.1-4.1-6.1h10.6,0Z"></path>
  </g>
  <circle class="govuk-logo-dot" cx="226" cy="36" r="7.3"></circle>
  <path d="M93.94 41.25c.4 1.81 1.2 3.21 2.21 4.62 1 1.4 2.21 2.41 3.61 3.21s3.21 1.2 5.22 1.2 3.61-.4 4.82-1c1.4-.6 2.41-1.4 3.21-2.41.8-1 1.4-2.01 1.61-3.01s.4-2.01.4-3.01v.14h-10.86v-7.02h20.07v24.08h-8.03v-5.56c-.6.8-1.38 1.61-2.19 2.41-.8.8-1.81 1.2-2.81 1.81-1 .4-2.21.8-3.41 1.2s-2.41.4-3.81.4a18.56 18.56 0 0 1-14.65-6.63c-1.6-2.01-3.01-4.41-3.81-7.02s-1.4-5.62-1.4-8.83.4-6.02 1.4-8.83a20.45 20.45 0 0 1 19.46-13.65c3.21 0 4.01.2 5.82.8 1.81.4 3.61 1.2 5.02 2.01 1.61.8 2.81 2.01 4.01 3.21s2.21 2.61 2.81 4.21l-7.63 4.41c-.4-1-1-1.81-1.61-2.61-.6-.8-1.4-1.4-2.21-2.01-.8-.6-1.81-1-2.81-1.4-1-.4-2.21-.4-3.61-.4-2.01 0-3.81.4-5.22 1.2-1.4.8-2.61 1.81-3.61 3.21s-1.61 2.81-2.21 4.62c-.4 1.81-.6 3.71-.6 5.42s.8 5.22.8 5.22Zm57.8-27.9c3.21 0 6.22.6 8.63 1.81 2.41 1.2 4.82 2.81 6.62 4.82S170.2 24.39 171 27s1.4 5.62 1.4 8.83-.4 6.02-1.4 8.83-2.41 5.02-4.01 7.02-4.01 3.61-6.62 4.82-5.42 1.81-8.63 1.81-6.22-.6-8.63-1.81-4.82-2.81-6.42-4.82-3.21-4.41-4.01-7.02-1.4-5.62-1.4-8.83.4-6.02 1.4-8.83 2.41-5.02 4.01-7.02 4.01-3.61 6.42-4.82 5.42-1.81 8.63-1.81Zm0 36.73c1.81 0 3.61-.4 5.02-1s2.61-1.81 3.61-3.01 1.81-2.81 2.21-4.41c.4-1.81.8-3.61.8-5.62 0-2.21-.2-4.21-.8-6.02s-1.2-3.21-2.21-4.62c-1-1.2-2.21-2.21-3.61-3.01s-3.21-1-5.02-1-3.61.4-5.02 1c-1.4.8-2.61 1.81-3.61 3.01s-1.81 2.81-2.21 4.62c-.4 1.81-.8 3.61-.8 5.62 0 2.41.2 4.21.8 6.02.4 1.81 1.2 3.21 2.21 4.41s2.21 2.21 3.61 3.01c1.4.8 3.21 1 5.02 1Zm36.32 7.96-12.24-44.15h9.83l8.43 32.77h.4l8.23-32.77h9.83L200.3 58.04h-12.24Zm74.14-7.96c2.18 0 3.51-.6 3.51-.6 1.2-.6 2.01-1 2.81-1.81s1.4-1.81 1.81-2.81a13 13 0 0 0 .8-4.01V13.9h8.63v28.15c0 2.41-.4 4.62-1.4 6.62-.8 2.01-2.21 3.61-3.61 5.02s-3.41 2.41-5.62 3.21-4.62 1.2-7.02 1.2-5.02-.4-7.02-1.2c-2.21-.8-4.01-1.81-5.62-3.21s-2.81-3.01-3.61-5.02-1.4-4.21-1.4-6.62V13.9h8.63v26.95c0 1.61.2 3.01.8 4.01.4 1.2 1.2 2.21 2.01 2.81.8.8 1.81 1.4 2.81 1.81 0 0 1.34.6 3.51.6Zm34.22-36.18v18.92l15.65-18.92h10.82l-15.03 17.32 16.03 26.83h-10.21l-11.44-20.21-5.62 6.22v13.99h-8.83V13.9"></path>
</svg>

We made this change in pull request #6036: Fix some wordmark artifacts at high zoom levels.

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

• #6029: Fix background colour of .govuk-template--rebranded

GOV.UK Frontend v5.11.0-internal.0

Caution

This version must not be used in production, only to help you prepare ahead of time to the changes that will be brought by GOV.UK Frontend 5.11

To install this version with npm, run npm install [email protected]. You can also find more information about how to stay up to date in our documentation.

New features

The Service navigation component no longer uses a menu on mobile for a single link

If you're using our Nunjucks macros, the Service navigation component will no longer collapse the navigation behind a 'Menu' toggle if there is only one navigation item.

You can control this behaviour using the new collapseNavigationOnMobile Nunjucks option.

If you are not using our Nunjucks macros, you can recreate this behaviour by omitting the 'Menu' <button> element if there is only one navigation item.

This change was introduced in pull request #6016: Don’t use menu for service nav with a single link.

Added inverse styling to Service navigation for use on product pages

When the GOV.UK rebrand is enabled, you can now add the govuk-service-navigation--inverse class to the Service navigation component to use white links on a blue background.

This allows the rebranded GOV.UK header and Service navigation to flow seamlessly with subsequent components that have a blue background, as is common on GOV.UK Digital Service Platform pages.

This change was made in pull request #6015: Add inverse variant to Service navigation component.

Deprecated features

Replace references to CSS custom properties for breakpoints

We've renamed the CSS custom properties for breakpoints to simplify the prefix from --govuk-frontend to just --govuk.

Old name	New name
--govuk-frontend-breakpoint-mobile	--govuk-breakpoint-mobile
--govuk-frontend-breakpoint-tablet	--govuk-breakpoint-tablet
--govuk-frontend-breakpoint-desktop	--govuk-breakpoint-desktop

You can still use the old names, but we'll remove them in the next breaking release (GOV.UK Frontend v6.0.0).

This change was introduced in pull request #6014: Simplify prefix for breakpoint custom properties.

Fixes

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

• #6018: Fix layout of Service navigation in Edge when forced colours are enabled
• #6019: Fix service nav wrapper not filling available width, thanks to @joelanman for reporting and fixing this issue

GOV.UK Frontend v5.10.2

To install this version with npm, run npm install [email protected]. You can also find more information about how to stay up to date in our documentation.

Fixes

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

• #5968: Apply header logo right padding only when menu button is visible