Components

Breadcrumbs

The breadcrumbs component helps users to understand where they are within a website’s structure and move between levels.

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

<gv-breadcrumbs>
  <gv-breadcrumb-item href="#">Home</gv-breadcrumb-item>
  <gv-breadcrumb-item href="#">Passports, travel and living abroad</gv-breadcrumb-item>
  <gv-breadcrumb-item href="#">Travel abroad</gv-breadcrumb-item>
</gv-breadcrumbs>

Using router-link or nuxt-link

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

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

<template>
  <gv-breadcrumbs>
    <gv-breadcrumb-item :component="NuxtLink" to="/example-page">Dashboard</gv-breadcrumb-item>
    <gv-breadcrumb-item :component="NuxtLink" to="/example-page">Reports</gv-breadcrumb-item>
    <gv-breadcrumb-item>Processing times</gv-breadcrumb-item>
  </gv-breadcrumbs>
</template>

Using a click event handler

You can attach a click event handler instead of setting href on breadcrumb items. Use @click.prevent to stop the browser from jumping to the top of the page.

<script setup lang="ts">
function handleClick(destination: String) {
  alert(`You clicked the breadcrumb to ${destination}`)
}
</script>

<template>
  <gv-breadcrumbs>
    <gv-breadcrumb-item @click.prevent="handleClick('Dashboard')">Dashboard</gv-breadcrumb-item>
    <gv-breadcrumb-item @click.prevent="handleClick('Reports')">Reports</gv-breadcrumb-item>
    <gv-breadcrumb-item>Processing times</gv-breadcrumb-item>
  </gv-breadcrumbs>
</template>

Collapsing breadcrumbs on mobile devices

If you have long breadcrumbs you can configure the component to only show the first and last items on mobile devices by setting :collapse-on-mobile="true".

<gv-breadcrumbs :collapse-on-mobile="true">
  <gv-breadcrumb-item href="#">Home</gv-breadcrumb-item>
  <gv-breadcrumb-item href="#">Environment</gv-breadcrumb-item>
  <gv-breadcrumb-item href="#">Rural and countryside</gv-breadcrumb-item>
  <gv-breadcrumb-item href="#">Rural development and land management</gv-breadcrumb-item>
  <gv-breadcrumb-item href="#">Economic growth in rural areas</gv-breadcrumb-item>
</gv-breadcrumbs>

GvBreadcrumbs

Props

Name	Type	Description
collapseOnMobile	boolean	When true, the breadcrumbs will collapse to the first and last item only on tablet breakpoint and below. Defaults to false.
ariaLabel	string	The text for the aria-label on the <nav> element around the breadcrumbs. Defaults to 'Breadcrumb'.

Slots

Name	Description
default	A list of gv-breadcrumb-items

GvBreadcrumbItem

Props

Name	Type	Description
text	string	Text to use within the breadcrumbs item. If content is provided in the default slot, this prop will be ignored.
href	string	Link for the breadcrumbs item. If not specified, breadcrumbs item is a normal list item.
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 breadcrumbs item. If content is provided in this slot, the text prop will be ignored.