This Drupal theme implements the GOV.UK Design System, providing responsive styles, components, and patterns. It offers full support for Drupal Webforms, including client-side validation with precise error messages. The theme is designed to be a strong starting point, though customization of Twig and SASS files may be necessary to achieve a specific look and feel.
A Drupal theme for the GOV.UK Design System
This theme utilises the GOV.UK Design System Frontend node module and has Twig template files for the majority of the GOV.UK styles, components and patterns. Fully responsive, multi-column with mobile navigation menu. Full support for Drupal Webforms with client side validation of required fields and exact GOV.UK validation error messages.
It is unlikely that this theme will this meet 100% of your requirements, but it is a good start. You will still have to create/modify Twig/SASS files to get your required look & feel. See the Customising guide.
REQUIREMENTS
- No extra module is required.
- Node.js >= V22.0 (optional) See https://nodejs.org
- Gulp >= V4.0 (optional)
INSTALLATION
The GOV.UK theme works out-of-the-box but if modifications to the SASS files are required then the GOV.UK Design System Frontend node module will need to be installed.
Read the full installation guide
TL;DR
- Install the theme as usual, see
https://www.drupal.org/docs/user_guide/en/extend-theme-install.html - Change to the theme directory, for example:
cd web/themes/contrib/govuk_theme - Install the Node dependencies:
npm ci
(Ifpackage-lock.jsonis not present, usenpm installinstead.) - Compile the Sass files:
npx gulp - To automatically recompile Sass when files change:
npx gulp watch
This theme includes all the CSS files so Gulp is only required for compiling changes/additions to the SASS files.
CONFIGURATION
Configuration is available in Admin > Appearance.
Read the configuration guide
MOBILE MENU SELECTORS
The theme provides 2 types of mobile menu selectors, set in Configuration.
The first (default) is the GDS defined menu link in the navigation area as below:
The second, by popular demand, is the traditional hamburger in the top right of the header. This has the advantage of using no display real estate.
GENERIC HEADER COMPONENT
The GOV.UK Frontend v6.3.0 introduced a Generic header component for services that are not part of the GOV.UK proposition but would still benefit from using GOV.UK Frontend to build their service. A demo of the use of this component in a custom sub theme is here.
RELEASES
The 8.x-1.* branch is for the GOV.UK Frontend v4 framework (currently v4.10.0) and will be supported by GDS until December 2024. No further development will be undertaken for this branch.
Final GOV.UK Frontend v4 version
The 2.1.* branch is for the GOV.UK Frontend v5 framework (currently v5.14.0) which includes substantial changes to the v4 framework. See the GOV.UK Frontend v5.x release notes.No further development will be undertaken for this branch.
Final GOV.UK Frontend v5 version.
Drupal 10.x
The Drupal 12 compatibility upgrades mean this theme is no longer compatible with Drupal 10.x. If you are still on Drupal 10.x then the latest compatible version can be installed with:
composer require 'drupal/govuk_theme:3.1.8'
The 3.1.* branch is for GOV.UK Frontend v6 framework (currently v6.6.0 release notes) which includes substantial changes to the v5 framework and the new colours for the web palette in the GOV.UK brand guidelines. See the GOV.UK Frontend v6.x release notes
UPGRADING FROM 8.x-1.* TO 2.1.* OR 3.1.x
After performing the upgrade to 2.1 or 3.1
composer require 'drupal/govuk_theme:^2.1' or composer require 'drupal/govuk_theme:^3.1'.
issue a vendor/bin/drush cr
Any 8.x-1 sub-themes will work without any modifications.
Ask your assistant about GOV.UK Theme
Check compatibility with your Drupal and PHP version, maintenance and security coverage, from current release data. How it works
Depends on
Dependencies of the latest stable release
No dependencies recorded for this project.
Required by
Tracked projects that depend on this one
No tracked projects depend on this one yet.