GOV.UK Prototype Kit: New layouts with service navigation

With the release of the new service navigation component, there are a couple of things we can do to integrate it into the prototype tool kit, but it does require some tweaks.

New service navigation component from the GOV.UK Design System

I’ve provided an example layout on github, this works by changing the header section in the base layout provided by the govuk prototype kit.

{# file: /app/layouts/layouts/main-with-service-navigation.njk %}

{% extends "govuk-prototype-kit/layouts/govuk-branded.njk" %}

{#
For guidance on how to use layouts see:
https://prototype-kit.service.gov.uk/docs/how-to-use-layouts
#}

{% extends "govuk-prototype-kit/layouts/govuk-branded.njk" %}


{% block header %}
{# Orginal header with stripped out service name and full blue border #}
{{ 
    govukHeader({
        homepageUrl: "/",
        serviceUrl: "/",
        classes: "govuk-header--full-width-border"
    })
}}
{# new service navigation component with selected menu #}
{{ 
    govukServiceNavigation({
        serviceName: serviceName,
        serviceUrl: "/",
        navigation: [
            {
            href: "/example/service-navigation?navItem=1",
            text: "Navigation item 1",
            active: true if data.navItem == 1
            },
            {
            href: "/example/service-navigation?navItem=2",
            text: "Navigation item 2",
            active: true if data.navItem == 2
            },
            {
            href: "/example/service-navigation?navItem=3",
            text: "Navigation item 3",
            active: true if data.navItem == 3
            }
        ]
        })
}}

{# example of phase banner and back links before the content #}
<div class="govuk-width-container">
{{ 
    govukPhaseBanner({
        tag: {
            text: "Alpha"
        },
        html: 'This is a new service. Help us improve it and <a class="govuk-link" href="#">give your feedback by email</a>.'
        })
}}

{{ 
    govukBackLink({
        text: "Back",
        href: "/"
    })
}}
</div>

{% endblock %}

You can now switch to using this layout instead of the default one, for the navigation this works by using the use links to set data method of the prototype kit something

A more deliberate example would be based on setting a nunjucks value.

{# using {% set section = "contact" %} in the page to select an item #}
{{ 
    govukServiceNavigation({
        serviceName: serviceName,
        serviceUrl: "/",
        navigation: [
            {
            href: "/example/service-navigation/contact",
            text: "Contact",
            active: true if section === "contact"
            },
            {
            href: "/example/service-navigation/users",
            text: "Users",
            active: true if section === "users"
            },
            {
            href: "/example/service-navigation/admin",
            text: "Admin",
            active: true if section === "admin"
            }
        ]
        })
}}