Add navigation option

components/header/template.njk

@@ -1,8 +1,10 @@
+{%- from "x-govuk/components/primary-navigation/macro.njk" import xGovukPrimaryNavigation -%}
 {%- from "../site-search/macro.njk" import appSiteSearch -%}
 {%- set headerType = "no-border" if
   layout == "product" or
   layout == "collection"
 -%}
+{%- set headerType = "full-width-border" if params.navigation -%}
 <header class="govuk-header app-header{% if headerType %} app-header--{{ headerType }}{% endif %}" role="banner" data-module="govuk-header">
   <div class="govuk-header__container govuk-width-container app-header__container">
     <div class="govuk-header__logo app-header__logo">
@@ -26,3 +28,7 @@
     {{ appSiteSearch(params.search) if params.search.indexPath | indent(4) }}
   </div>
 </header>
+{{ xGovukPrimaryNavigation({
+  visuallyHiddenTitle: params.navigation.visuallyHiddenTitle,
+  items: params.navigation.items | currentPage(page.url)
+}) if params.navigation }}

index.js

@@ -31,6 +31,10 @@ module.exports = function (eleventyConfig, pluginOptions = {}) {
     require('./lib/filters/canonical-url.js')
   )
   eleventyConfig.addFilter('date', require('./lib/filters/date.js'))
+  eleventyConfig.addFilter(
+    'currentPage',
+    require('./lib/filters/current-page.js')
+  )
   eleventyConfig.addFilter('includes', require('./lib/filters/includes.js'))
   eleventyConfig.addFilter(
     'itemsFromCollection',

lib/filters/current-page.js

@@ -0,0 +1,13 @@
+/**
+ * Indicate which is the current item in navigation items
+ * @param {Array} array - Navigation items
+ * @param {string} pageUrl - URL of current page
+ * @returns {Array} Navigation items
+ */
+module.exports = (array, pageUrl) => {
+  return array.map((item) => {
+    item.current = pageUrl.startsWith(item.href)
+
+    return item
+  })
+}