Universal Credit Claimant navigation

Navigation elements for the claimant view of Universal Credit.

When to use these components

These navigation elements appear in the claimant view of the Universal Credit service.

When not to use this component

Do not use these navigation elements outside the Universal Credit service.

For other public-facing services use the GOV.UK header and service navigation components; for DWP internal services consider the DWP header navigation or side navigation instead.

How it works

There are three navigation components: primary navigation, navigation cards and to-do items.

To use the components in your prototype, first install the GOV.UK Prototype Kit and DWP Frontend.

Used to navigate between the primary sections of the Universal Credit service.

<nav>
<ul class="uc-claimant-navigation__list">
<li class="uc-claimant-navigation__item">
  <a class="uc-claimant-navigation__link" href="#">
    Home
  </a>
</li>
<li class="uc-claimant-navigation__item">
  <a class="uc-claimant-navigation__link" href="#">
    To-do list
  </a>
</li>
<li class="uc-claimant-navigation__item">
  <a class="uc-claimant-navigation__link" href="#">
    Journal
  </a>
</li>
</ul>
</nav>

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.

Name	Type	Description
attributes	object	HTML attributes (for example Aria attributes).
items	array	Array of object navigation items, see items

Options for items array object

Name	Type	Description
text	string	Required. Text for the navigation item.
href	string	URL of the navigation item anchor.
active	boolean	Flag to mark the navigation item as active.

{% from "uc/claimant-navigation/macro.njk" import ucClaimantNavigation %}

{{
ucClaimantNavigation({
    "items": [
    {
        "href": "#",
        "text": "Home"
    },
    {
        "href": "#",
        "text": "To-do list"
    },
    {
        "href": "#",
        "text": "Journal"
    }
    ]
})
}}

If the citizen has navigated to a section, that section should be highlighted.

<nav>
<ul class="uc-claimant-navigation__list">
<li class="uc-claimant-navigation__item">
  <a class="uc-claimant-navigation__link" href="#">
    Home
  </a>
</li>
<li class="uc-claimant-navigation__item uc-claimant-navigation__item--active">
  <a class="uc-claimant-navigation__link" href="#" aria-current="true">
    To-do list
  </a>
</li>
<li class="uc-claimant-navigation__item">
  <a class="uc-claimant-navigation__link" href="#">
    Journal
  </a>
</li>
</ul>
</nav>

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.

Name	Type	Description
attributes	object	HTML attributes (for example Aria attributes).
items	array	Array of object navigation items, see items

Options for items array object

Name	Type	Description
text	string	Required. Text for the navigation item.
href	string	URL of the navigation item anchor.
active	boolean	Flag to mark the navigation item as active.

{% from "uc/claimant-navigation/macro.njk" import ucClaimantNavigation %}

{{
ucClaimantNavigation({
    "items": [
    {
        "href": "#",
        "text": "Home"
    },
    {
        "href": "#",
        "text": "To-do list",
        "active": true
    },
    {
        "href": "#",
        "text": "Journal"
    }
    ]
})
}}

Card-style navigation used in the Home area of the claimant view.

A card may have a second set of cards, for example ‘Payments and advances’ split into seperate cards for Payment and Advances.

Report a change

Tell us if your circumstances have changed. Examples include your work situation, health or relationships.
Report a fit note

Submit your doctor's details and the dates they've put on your fit note.
Make a journal entry

Record your activity, let us know about appointments and send or receive messages.
Payments and advances

View your payments, apply for an advance or check how much you owe.
To-do list

Check if we're asking you for any information.
Work search

Guidance and tools to help you search and apply for jobs.

<ul class="uc-section-cards">
<li class="uc-section-cards__item">
<div class="uc-section-card">
  <h2 class="uc-section-card__header">
    <a href="/link-1" class="uc-section-card__link">Report a change</a>
  </h2>
  <p class="uc-section-card__description">Tell us if your circumstances have changed. Examples include your work situation, health or relationships.</p>
</div>
</li>
<li class="uc-section-cards__item">
<div class="uc-section-card">
  <h2 class="uc-section-card__header">
    <a href="/link-2" class="uc-section-card__link">Report a fit note</a>
  </h2>
  <p class="uc-section-card__description">Submit your doctor&#39;s details and the dates they&#39;ve put on your fit note.</p>
</div>
</li>
<li class="uc-section-cards__item">
<div class="uc-section-card">
  <h2 class="uc-section-card__header">
    <a href="/link-3" class="uc-section-card__link">Make a journal entry</a>
  </h2>
  <p class="uc-section-card__description">Record your activity, let us know about appointments and send or receive messages.</p>
</div>
</li>
<li class="uc-section-cards__item">
<div class="uc-section-card">
  <h2 class="uc-section-card__header">
    <a href="/link-4" class="uc-section-card__link">Payments and advances</a>
  </h2>
  <p class="uc-section-card__description">View your payments, apply for an advance or check how much you owe.</p>
</div>
</li>
<li class="uc-section-cards__item">
<div class="uc-section-card">
  <h2 class="uc-section-card__header">
    <a href="/link-5" class="uc-section-card__link">To-do list</a>
  </h2>
  <p class="uc-section-card__description">Check if we&#39;re asking you for any information.</p>
</div>
</li>
<li class="uc-section-cards__item">
<div class="uc-section-card">
  <h2 class="uc-section-card__header">
    <a href="/link-6" class="uc-section-card__link">Work search</a>
  </h2>
  <p class="uc-section-card__description">Guidance and tools to help you search and apply for jobs.</p>
</div>
</li>
</ul>

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.

Name	Type	Description
cards	object	Required. an array of cards, see cards

Options for cards object

Name	Type	Description
title	string	Required. Title of the card
titleUrl	string	Required. The url of the title
description	string	paragraph of text to descript the card

{% from "uc/section-cards/macro.njk" import ucSectionCards %}

{{
ucSectionCards({
        "cards": [
          {
            "title": "Report a change",
            "titleUrl": "/link-1",
            "description": "Tell us if your circumstances have changed. Examples include your work situation, health or relationships."
          },
          {
            "title": "Report a fit note",
            "titleUrl": "/link-2",
            "description": "Submit your doctor's details and the dates they've put on your fit note."
          },
          {
            "title": "Make a journal entry",
            "titleUrl": "/link-3",
            "description": "Record your activity, let us know about appointments and send or receive messages."
          },
          {
            "title": "Payments and advances",
            "titleUrl": "/link-4",
            "description": "View your payments, apply for an advance or check how much you owe."
          },
          {
            "title": "To-do list",
            "titleUrl": "/link-5",
            "description": "Check if we're asking you for any information."
          },
          {
            "title": "Work search",
            "titleUrl": "/link-6",
            "description": "Guidance and tools to help you search and apply for jobs."
          }
        ]
})
}}

To-do items

Used to show actionable items in the claimant’s to-do list.

Confirm your identity
Finish setting up your account to keep your information secure.
Prepare to meet your work coach
You'll need to provide a copy of your CV.
Make a payment
Payment must be made by 20 August 2019

The total amount payable is £30.00.

<ul class="uc-action-cards">
<li class="uc-action-cards__item">
<div class="uc-action-card">
  <a href="#your-identity" class="uc-action-card__link">
    <span class="uc-action-card__link-text">Confirm your identity</span>
    <p class="uc-action-card__description">Finish setting up your account to keep your information secure.</p>
  </a>
</div>
</li>
<li class="uc-action-cards__item">
<div class="uc-action-card">
  <a href="#meet-your-work-coach" class="uc-action-card__link">
    <span class="uc-action-card__link-text">Prepare to meet your work coach</span>
    <p class="uc-action-card__description">You&#39;ll need to provide a copy of your CV.</p>
  </a>
</div>
</li>
<li class="uc-action-cards__item">
<div class="uc-action-card">
  <a href="#make-a-payment" class="uc-action-card__link">
    <span class="uc-action-card__link-text">Make a payment</span>
    <p class="uc-action-card__alert">Payment must be made by 20 August 2019</p>
    <p class="uc-action-card__description">The total amount payable is £30.00.</p>
  </a>
</div>
</li>
</ul>

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.

Name	Type	Description
cards	object	Required. an array of cards, see cards

Options for cards object

Name	Type	Description
title	string	Required. Title of the card
titleUrl	string	Required. The url of the title
alert	string	Addtional paragraph of called out information
description	string	paragraph of text to descript the card

{% from "uc/action-cards/macro.njk" import ucActionCards %}

{{
ucActionCards({
    "cards": [
        {
            "title": "Confirm your identity",
            "titleUrl": "#your-identity",
            "description": "Finish setting up your account to keep your information secure."
        },
        {
            "title": "Prepare to meet your work coach",
            "titleUrl": "#meet-your-work-coach",
            "description": "You'll need to provide a copy of your CV."
        },
        {
            "title": "Make a payment",
            "titleUrl": "#make-a-payment",
            "alert": "Payment must be made by 20 August 2019",
            "description": "The total amount payable is £30.00."
        }
    ]
})
}}

Accessibility

For more about building accessible services see the DWP Accessibility Manual.

Contribute

If you have used or researched this component, please use the email address below to let us know what you found so we can make it better for everyone.

Get in touch

If you’ve got a question, idea or suggestion email the Design System team on dwp-design-system@engineering.digital.dwp.gov.uk

Universal Credit Claimant navigation

When to use these components

When not to use this component

How it works

Primary navigation

Options for items array object

Options for items array object

Navigation cards

Report a change

Report a fit note

Make a journal entry

Payments and advances

To-do list

Work search

Options for cards object

To-do items

Options for cards object

Accessibility

Contribute

Get in touch

Cookies on the DWP Design System website

Universal Credit Claimant navigation

When to use these components

When not to use this component

How it works

Primary navigation

Options for items array object

Options for items array object

Navigation cards

Report a change

Report a fit note

Make a journal entry

Payments and advances

To-do list

Work search

Options for cards object

To-do items

Options for cards object

Accessibility

Contribute

Get in touch