diff --git a/docs/examples/masthead-below-primary-navigation.njk b/docs/examples/masthead-below-service-navigation.njk
similarity index 69%
rename from docs/examples/masthead-below-primary-navigation.njk
rename to docs/examples/masthead-below-service-navigation.njk
index 29f950d..e54ce6f 100644
--- a/docs/examples/masthead-below-primary-navigation.njk
+++ b/docs/examples/masthead-below-service-navigation.njk
@@ -1,26 +1,19 @@
---
eleventyExcludeFromCollections: true
layout: example-full-width.njk
-title: Masthead example below primary navigation
+title: Masthead example below service navigation
---
-
-
{% from "govuk/components/header/macro.njk" import govukHeader %}
{{ govukHeader({
- classes: "app-header--full-width-border"
+ classes: "govuk-header--full-width-border"
}) }}
-{% from "x-govuk/components/primary-navigation/macro.njk" import xGovukPrimaryNavigation %}
-{{ xGovukPrimaryNavigation({
- visuallyHiddenTitle: "Navigation",
- items: [{
+{% from "govuk/components/service-navigation/macro.njk" import govukServiceNavigation %}
+{{ govukServiceNavigation({
+ navigation: [{
text: "Home",
href: "#",
- current: true
+ active: true
}, {
text: "Support",
href: "#"
diff --git a/docs/examples/primary-navigation-below-header.njk b/docs/examples/primary-navigation-below-header.njk
deleted file mode 100644
index 67b5df3..0000000
--- a/docs/examples/primary-navigation-below-header.njk
+++ /dev/null
@@ -1,37 +0,0 @@
----
-eleventyExcludeFromCollections: true
-layout: example-full-width.njk
-title: Primary navigation example below header
----
-
-
-{% from "govuk/components/header/macro.njk" import govukHeader %}
-{{ govukHeader({
- classes: "app-header--full-width-border"
-}) }}
-
-{% from "x-govuk/components/primary-navigation/macro.njk" import xGovukPrimaryNavigation %}
-{{ xGovukPrimaryNavigation({
- visuallyHiddenTitle: "Navigation",
- items: [{
- text: "Home",
- href: "#",
- current: true
- }, {
- text: "Support",
- href: "#"
- }, {
- text: "Features",
- href: "#"
- }, {
- text: "Pricing",
- href: "#"
- }, {
- text: "Contact us",
- href: "#"
- }]
-}) }}
\ No newline at end of file
diff --git a/docs/examples/primary-navigation-below-phase-banner.njk b/docs/examples/primary-navigation-below-phase-banner.njk
deleted file mode 100644
index a843014..0000000
--- a/docs/examples/primary-navigation-below-phase-banner.njk
+++ /dev/null
@@ -1,50 +0,0 @@
----
-eleventyExcludeFromCollections: true
-layout: example-full-width.njk
-title: Primary navigation example below phase banner
----
-
-
-{% from "govuk/components/header/macro.njk" import govukHeader %}
-{{ govukHeader({
- classes: "app-header--full-width-border"
-}) }}
-
-{% from "govuk/components/phase-banner/macro.njk" import govukPhaseBanner %}
-{{ govukPhaseBanner({
- classes: "app-phase-banner--no-border govuk-width-container",
- tag: {
- text: "Alpha"
- },
- html: 'This is a new service – your feedback will help us to improve it.'
-}) }}
-
-{% from "x-govuk/components/primary-navigation/macro.njk" import xGovukPrimaryNavigation %}
-{{ xGovukPrimaryNavigation({
- visuallyHiddenTitle: "Navigation",
- items: [{
- text: "Home",
- href: "#",
- current: true
- }, {
- text: "Support",
- href: "#"
- }, {
- text: "Features",
- href: "#"
- }, {
- text: "Pricing",
- href: "#"
- }, {
- text: "Contact us",
- href: "#"
- }]
-}) }}
\ No newline at end of file
diff --git a/docs/examples/primary-navigation.njk b/docs/examples/primary-navigation.njk
deleted file mode 100644
index 7c0de51..0000000
--- a/docs/examples/primary-navigation.njk
+++ /dev/null
@@ -1,26 +0,0 @@
----
-eleventyExcludeFromCollections: true
-layout: example-full-width.njk
-title: Primary navigation example
----
-{% from "x-govuk/components/primary-navigation/macro.njk" import xGovukPrimaryNavigation %}
-{{ xGovukPrimaryNavigation({
- visuallyHiddenTitle: "Navigation",
- items: [{
- text: "Home",
- href: "#",
- current: true
- }, {
- text: "Support",
- href: "#"
- }, {
- text: "Features",
- href: "#"
- }, {
- text: "Pricing",
- href: "#"
- }, {
- text: "Contact us",
- href: "#"
- }]
-}) }}
\ No newline at end of file
diff --git a/docs/masthead.md b/docs/masthead.md
index 3c5b8d9..b52d579 100644
--- a/docs/masthead.md
+++ b/docs/masthead.md
@@ -36,10 +36,10 @@ To ensure there is no gap between the header and the masthead, create a modifier
example: "masthead-below-header"
}) }}
-If your service uses [the primary navigation component](primary-navigation), this should appear directly above the masthead:
+If your service uses [the service navigation component](https://design-system.service.gov.uk/components/service-navigation/), this should appear directly above the masthead:
{{ appExample({
- example: "masthead-below-primary-navigation"
+ example: "masthead-below-service-navigation"
}) }}
You can use HTML or, if you are using Nunjucks or the GOV.UK Prototype Kit, you can use the Nunjucks macro.
diff --git a/docs/primary-navigation.md b/docs/primary-navigation.md
index 6c81aaf..4d25b8f 100644
--- a/docs/primary-navigation.md
+++ b/docs/primary-navigation.md
@@ -1,120 +1,12 @@
---
+eleventyExcludeFromCollections: true
layout: sub-navigation
-order: 5
title: Primary navigation
-description: Link to the primary sections of your service.
---
{% from "example/macro.njk" import appExample %}
+{% from "govuk/components/notification-banner/macro.njk" import govukNotificationBanner %}
-{{ appExample({
- example: "primary-navigation"
+{{ govukNotificationBanner({
+ html: "### This component has been retired\n\nUse the [service navigation component](https://design-system.service.gov.uk/components/service-navigation/) in the GOV.UK Design System to help users navigate to the main sections of your service." | markdown
}) }}
-
-## When to use this component
-
-Use the primary navigation component to let users navigate to the main sections of your service.
-
-You must use this component with [the header component](https://design-system.service.gov.uk/components/header/).
-
-## How it works
-
-The primary navigation component takes up the full width of the page. To ensure there is no gap between the header and this component, create a modifying class to make the bottom border on the header also take up the full width of the page:
-
-{{ appExample({
- example: "primary-navigation-below-header"
-}) }}
-
-Only include links to top level sections within your service.
-
-One of the items should be highlighted if it matches the current page or parent section. This item remains a link, but includes an `aria-current="page"` attribute with a line displayed beneath it to indicate that it is the current section.
-
-If your service uses [the phase banner component](https://design-system.service.gov.uk/components/phase-banner/), this should appear directly above the primary navigation component.
-
-To ensure there is no border between the phase banner and navigation, create a modifying class to remove the bottom border from the phase banner:
-
-{{ appExample({
- example: "primary-navigation-below-phase-banner"
-}) }}
-
-You can use HTML or, if you are using Nunjucks or the GOV.UK Prototype Kit, you can use the Nunjucks macro.
-
-## Nunjucks macro options
-
-Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
-
-Some options are required for the macro to work; these are marked as “Required” in the option description.
-
-If you’re using Nunjucks macros in production with `html` options, or ones ending with `html`, you must sanitise the HTML to protect against [cross-site scripting exploits](https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting).
-
-{% from "govuk/components/table/macro.njk" import govukTable %}
-{{ govukTable({
- firstCellIsHeader: true,
- head: [
- { text: "Name" },
- { text: "Type" },
- { text: "Description" }
- ],
- rows: [
- [
- { text: "items" },
- { text: "Array" },
- { text: "**Required**. An array of navigation links. See [items](#items)." | markdown }
- ],
- [
- { text: "visuallyHiddenTitle" },
- { text: "string" },
- { text: "A visually-hidden label to describe the navigation (default is ‘Menu’). " }
- ],
- [
- { text: "classes" },
- { text: "string" },
- { text: "Classes to add to the primary navigation container." }
- ],
- [
- { text: "attributes" },
- { text: "object" },
- { text: "HTML attributes (for example data attributes) to add to the navigation container." }
- ]
- ]
-}) }}
-
-{{ govukTable({
- attributes: { id: "items" },
- caption: "Options for items",
- captionClasses: "govuk-table__caption--m",
- firstCellIsHeader: true,
- head: [
- { text: "Name" },
- { text: "Type" },
- { text: "Description" }
- ],
- rows: [
- [
- { text: "text" },
- { text: "string" },
- { text: "**Required**. Text of the navigation link." | markdown }
- ],
- [
- { text: "href" },
- { text: "string" },
- { text: "**Required**. The value of the navigation link’s `href` attribute." | markdown }
- ],
- [
- { text: "current" },
- { text: "boolean" },
- { text: "Indicate that the item is the current page." }
- ],
- [
- { text: "classes" },
- { text: "string" },
- { text: "Classes to add to the navigation item." }
- ]
- ]
-}) }}
-
-## Research on this component
-
-This component is based on [the Primary navigation component originally developed as part of the Ministry of Justice Design System](https://design-patterns.service.justice.gov.uk/components/primary-navigation/).
-
-It also follows the design of the [GOV.UK One Login service header](https://github.com/govuk-one-login/service-header).
diff --git a/docs/secondary-navigation.md b/docs/secondary-navigation.md
index 4aa8a73..6de9cb9 100644
--- a/docs/secondary-navigation.md
+++ b/docs/secondary-navigation.md
@@ -13,7 +13,7 @@ description: Allow users to navigate between pages scoped to a section.
## When to use this component
-Use the secondary navigation when you already have a [primary navigation](primary-navigation) and need to let users navigate between pages that are scoped to a particular section or concept.
+Use the secondary navigation when you already have [service navigation](https://design-system.service.gov.uk/components/service-navigation/) and need to let users navigate between pages that are scoped to a particular section or concept.
For example, if your service is a case management system, you might use the secondary navigation if there are multiple pages associated with a single case.
diff --git a/docs/supported-versions.md b/docs/supported-versions.md
index a07d532..ab22e52 100644
--- a/docs/supported-versions.md
+++ b/docs/supported-versions.md
@@ -6,8 +6,8 @@ title: Supported versions
GOV.UK Prototype Components are actively maintained and support the latest stable versions of the [GOV.UK Frontend](https://frontend.design-system.service.gov.uk), [GOV.UK Prototype Kit](https://prototype-kit.service.gov.uk) and [Node JS](https://nodejs.org).
-| GOV.UK Prototype Components | {{ pkg.version }} | 2.2.2 |
-| --------------------------- | ----------------- | ------- |
-| GOV.UK Frontend | 5.0.0 | 4.7.0 |
-| GOV.UK Prototype Kit | 13.16.0 | 13.16.0 |
-| Node JS | 18.0.0 | 18.0.0 |
+| GOV.UK Prototype Components | {{ pkg.version }} | 3.0.7 | 2.2.2 |
+| --------------------------- | ----------------- | ------- | ------- |
+| GOV.UK Frontend | 5.0.0 | 5.0.0 | 4.7.0 |
+| GOV.UK Prototype Kit | 13.16.0 | 13.16.0 | 13.16.0 |
+| Node JS | 18.0.0 | 18.0.0 | 18.0.0 |
diff --git a/eleventy.config.js b/eleventy.config.js
index caba23e..cef2b00 100644
--- a/eleventy.config.js
+++ b/eleventy.config.js
@@ -105,7 +105,6 @@ module.exports = function (eleventyConfig) {
.getFilteredByGlob([
'docs/autocomplete.md',
'docs/masthead.md',
- 'docs/primary-navigation.md',
'docs/secondary-navigation.md',
'docs/sub-navigation.md',
'docs/related-navigation.md',
diff --git a/govuk-prototype-kit.config.json b/govuk-prototype-kit.config.json
index 4f1ff45..c0ff22f 100644
--- a/govuk-prototype-kit.config.json
+++ b/govuk-prototype-kit.config.json
@@ -17,10 +17,6 @@
"importFrom": "masthead/macro.njk",
"macroName": "xGovukMasthead"
},
- {
- "importFrom": "primary-navigation/macro.njk",
- "macroName": "xGovukPrimaryNavigation"
- },
{
"importFrom": "related-navigation/macro.njk",
"macroName": "xGovukRelatedNavigation"
@@ -47,11 +43,6 @@
"path": "/govuk-prototype-kit/templates/masthead.html",
"type": "nunjucks"
},
- {
- "name": "Primary navigation page",
- "path": "/govuk-prototype-kit/templates/primary-navigation.html",
- "type": "nunjucks"
- },
{
"name": "Related navigation page",
"path": "/govuk-prototype-kit/templates/related-navigation.html",
diff --git a/govuk-prototype-kit/templates/primary-navigation.html b/govuk-prototype-kit/templates/primary-navigation.html
deleted file mode 100644
index fdb1815..0000000
--- a/govuk-prototype-kit/templates/primary-navigation.html
+++ /dev/null
@@ -1,52 +0,0 @@
-{% extends "layouts/main.html" %}
-
-{% block pageTitle %}
- Primary navigation page template – {{ serviceName }} – GOV.UK Prototype Kit
-{% endblock %}
-
-{% block beforeContent %}
- {{ govukBackLink({
- href: "javascript:window.history.back()"
- }) }}
-{% endblock %}
-
-{% block header %}
- {{ govukHeader({
- homepageUrl: "/",
- serviceName: serviceName,
- serviceUrl: "/",
- classes: "govuk-header__container--full-width",
- containerClasses: "govuk-width-container"
- }) }}
-{% endblock %}
-
-{% block main %}
- {{ xGovukPrimaryNavigation({
- visuallyHiddenTitle: "Site navigation",
- items: [{
- text: "Page 1",
- href: "#"
- }, {
- text: "Page 2",
- href: "#"
- }]
- }) }}
-
-