Components

Service navigation

Service navigation helps users understand that they’re using your service and lets them navigate around your service.

See the GOV.UK Design System documentation on service navigation for more information on when to use this component.

Service name

<gv-service-navigation service-name="Service name" service-url="/example-page">
  <gv-service-navigation-item href="/example-page">Navigation item 1</gv-service-navigation-item>
  <gv-service-navigation-item href="/example-page" :current="true">Navigation item 2</gv-service-navigation-item>
  <gv-service-navigation-item href="/example-page">Navigation item 3</gv-service-navigation-item>
</gv-service-navigation>

Showing service navigation under the GOV.UK header

If you're including service navigation under the Header, pass class="govuk-header--full-width-border" to the header to make the blue bar the full width of the page.

Service name

<gv-header class="govuk-header--full-width-border"/>
<gv-service-navigation service-name="Service name">
  <gv-service-navigation-item href="/example-page">Navigation item 1</gv-service-navigation-item>
  <gv-service-navigation-item href="/example-page" :current="true">Navigation item 2</gv-service-navigation-item>
  <gv-service-navigation-item href="/example-page">Navigation item 3</gv-service-navigation-item>
</gv-service-navigation>

Marking the current page

You can mark a gv-service-navigation-item as current or active. Use current if the user is currently on that page, or active if on a page beneath that navigation item.

For example, if you have a 'Staff directory' link in your service navigation, use current when the user is on /staff-directory and active if the user is on /staff-directory/profile/123.

You can pass both :current="true" and :active="true" for the page the user is currently on; you do not need to ensure only one of them is true.

Using router-link or nuxt-link for navigation links

You can set up navigation links to use router-link or nuxt-link if needed. See Using router-link or nuxt-link for more details.

Service name

<script setup lang="ts">
  import { NuxtLink } from '#components';
</script>

<template>
  <gv-service-navigation service-name="Service name" :service-name-link-component="NuxtLink" service-url="/example-page">
    <gv-service-navigation-item :component="NuxtLink" to="/example-page">Navigation item 1</gv-service-navigation-item>
    <gv-service-navigation-item :component="NuxtLink" to="/example-page" :current="true">Navigation item 2</gv-service-navigation-item>
    <gv-service-navigation-item :component="NuxtLink" to="/example-page">Navigation item 3</gv-service-navigation-item>
  </gv-service-navigation>
</template>

GvServiceNavigation

Props

Name	Type	Description
ariaLabel	string	The text for the aria-label which labels the service navigation container when a service name is included. Defaults to 'Service information'.
menuButtonText	string	The text of the mobile navigation menu toggle. Defaults to 'Menu'.
menuButtonLabel	string	The screen reader label for the mobile navigation menu toggle. Defaults to the same value as menuButtonText if not specified.
navigationLabel	string	The screen reader label for the mobile navigation menu. Defaults to the same value as menuButtonText if not specified.
navigationId	string	The ID used to associate the mobile navigation toggle with the navigation menu. Defaults to 'navigation'.
navigationClass	string|array|object	Classes to add to the navigation menu container. You can bind a string, an array or an object, as with normal Vue class bindings.
serviceName	string	The name of your service.
serviceUrl	string	The homepage of your service.
serviceNameLinkComponent	string|object	The component used to render the service name link, for example RouterLink. Will default to a if a serviceUrl is provided or no link otherwise.

Slots

Name	Description
start	Content injected at the start of the service header container
default	A list of gv-service-navigation-items
end	Content injected at the end of the service header container

GvServiceNavigationItem

Props

Name	Type	Description
current	boolean	If true, indicates that the user is currently on this page. This takes precedence over active.
active	boolean	If true, indicates that the user is within this group of pages in the navigation hierarchy.
text	string	Text for the navigation item. If content is provided in the default slot, this prop will be ignored.
href	string	URL of the navigation item anchor.
component	string|object	The component used to render the link, for example RouterLink. Will default to a if an href is provided or no link otherwise.

Slots

Name	Description
default	The content of the navigation item. If content is provided in this slot, the text prop will be ignored.