Frontend templates

Step by step nav

Step by step is primarily navigation and not a content format. It’s not designed to replace or compete with guidance.

How it works

Use step by step navigation to represent end-to-end journeys that:

• have specific start and end points
• require the user to interact with several pieces of guidance or transactions on GOV.UK
• require the user to complete tasks in a specific order

Step by steps can span guidance and transactions that belong to more than one department.

Guidelines for not having a step by step

Do not use step by step navigation:

• when a user only needs to read guidance and not take a particular action
• when the guidance or services that make up the journey aren’t on GOV.UK
• when the journey isn’t linear, for example if you just want to present users with a series of options or to bring together related tasks

You should not use step by step inside a service. Use the task list pattern instead. If a department wants to use the step by step pattern inside a service in order to track a user’s progress through a service, they cannot use step by step.

Examples of when not to use step by step

We wouldn’t create a step by step to help users decide what kind of visa to apply for because it’s not a linear journey, it’s just a collection of options. But we could create one about what to do to come to the UK to study, and one of the tasks might be about finding the right visa to apply for.

We wouldn’t create a step by step for teachers on how to manage their workload because because it’s made up of a collection of related tasks. It’s not a linear journey with a start and an end.

Live examples

• Get Tax-Free Childcare: step by step
• Tell DVLA you’ve changed address: step by step
• Set up a limited company: step by step

Complete list of examples available and page data on Content Data.

How it’s built

These are the underlying technologies that make-up the step by step nav front template.

Content schema

step_by_step_nav

What is a content schema?

A GOV.UK content schema is a JSON schema that defines the data structure of a piece of content. It determines what content and metadata attributes the page has.

Content type

step_by_step_nav

What is a content type?

Content type describes the types of pages that exist on GOV.UK. It’s stored in the content item (JSON) as document_type. It powers search filters in all finders and changes the content type label users see on GOV.UK pages.

Publishing app

collections-publisher

What is a publishing app?

Publishing apps are used by publishers across government departments to publish content to GOV.UK.

Rendering app

collections

What is a rendering app?

Rendering apps render content to GOV.UK end-users.

Components

The components used within the step by step nav frontend template

Component	Source	Publishing app input field(s)
Layout super navigation header	Autogenerated in frontend template
Breadcrumbs	Autogenerated in frontend template	Tags > taken to content tagger > Primary mainstream browse page
Page title	Customized by publisher	Title (required)
Govspeak content	Customized by publisher	Introduction (required)
Step by step navigation	Autogenerated in frontend template	Steps > Step title (required) + Step label + Content, tasks and links
Feedback	Autogenerated in frontend template
Layout footer	Autogenerated in frontend template

How to report an issue

If you happen to come across an issue:

1. Report it on Github (opens in a new tab).
2. Once the issue has been added, update this document by adding the title and Github Issue's link.
3. Give yourself a high-five.

Help improve this frontend template

To help make sure that this page is useful, relevant and up to date, submit a GitHub issue (opens in a new tab) with your proposed updates.