Components

Footer

The footer provides copyright, licensing and other information about your service.

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

<gv-footer />

Meta links

To add meta links to the footer, use the meta slot and pass one or more GvFooterMetas, each with one or more GvFooterMetaItems. If you pass multiple GvFooterMetas, they will be shown on top of each other.

Use meta links to add links to your:

• privacy notice
• accessibility statement
• cookies page
• terms and conditions
• other language options

You can use router-link or nuxt-link for your meta links if needed.

<gv-footer>
  <template #meta>
    <gv-footer-meta>
      <gv-footer-meta-item href="#">Item 1</gv-footer-meta-item>
      <gv-footer-meta-item href="#">Item 2</gv-footer-meta-item>
      <gv-footer-meta-item href="#">Item 3</gv-footer-meta-item>
    </gv-footer-meta>
  </template>
</gv-footer>

Secondary navigation

To add secondary navigation links footer, use the navigation slot and pass one or more GvFooterNavigations, each with one or more GvFooterNavigationItems.

Each group of navigation links can be split into multiple columns by passing a number to the columns prop, and groups can be shown side-by-side on larger screens by using the width prop. You can pass any GOV.UK Design System grid width here, for example, one-third; two-thirds; one-half.

You can use router-link or nuxt-link for your navigation links if needed.

<gv-footer>
  <template #navigation>
    <gv-footer-navigation 
      title="Two column list" 
      width="two-thirds" 
      :columns="2"
    >
      <gv-footer-navigation-item v-for="index in 6" :key="index" href="#">
        Navigation item {{ index }}
      </gv-footer-navigation-item>
    </gv-footer-navigation>
    <gv-footer-navigation 
      title="Single column list" 
      width="one-third"
    >
      <gv-footer-navigation-item v-for="index in 3" :key="index" href="#">
        Navigation item {{ index }}
      </gv-footer-navigation-item>
    </gv-footer-navigation>
  </template>
</gv-footer>

Licence and copyright information.

By default, the footer will show that your content is Crown Copyright and licenced under the Open Government Licence. If either of these do not apply to your service, you can override them with the content-licence and copyright slots and props. For example, your content may use the MIT licence but still be under Crown Copyright.

<gv-footer>
  <template #content-licence>
    Released under the <a href="https://opensource.org/license/mit/" class="govuk-footer__link">MIT License</a>.
  </template>
</gv-footer>

You can exclude the content licence or copyright by passing empty content to the slot.

<gv-footer>
  <template #content-licence />
  <template #copyright>
    Copyright © Organisation Name
  </template>
</gv-footer>

<gv-footer>
  <template #content-licence>
    All content freely available under <a href="https://creativecommons.org/publicdomain/zero/1.0/" class="govuk-footer__link">CC0</a>.
  </template>
  <template #copyright/>
</gv-footer>

GvFooter

Props

Name	Type	Description
containerClass	string|array|object	Classes that can be added to the inner container, useful if you want to make the footer full width. You can bind a string, an array or an object, as with normal Vue class bindings.
contentLicence	string	The content licence information. Defaults to Open Government Licence (OGL) v3 licence. If content is provided in the content-licence slot, this prop will be ignored.
copyright	string	The copyright information. Defaults to Crown Copyright.

Slots

Name	Description
navigation	A list of GvFooterNavigation columns, each containing a list of GvFooterNavigationItems
meta	One or more GvFooterMeta components containing meta items, such as links to your accessibility statement and cookie policy
content-licence	The content licence information. If content is provided in this slot, the content-licence prop will be ignored.
copyright	The copyright licence information. If content is provided in this slot, the copyright prop will be ignored.

GvFooterMeta

Props

Name	Type	Description
visuallyHiddenTitle	string	Title for a meta item section. Defaults to 'Support links'.
text	string	Text to add to the meta section of the footer, which will appear below any links in the default slot. If content is provided in the text slot, this prop will be ignored.

Slots

Name	Description
default	A list of GvFooterMetaItems
text	Text to add to the meta section of the footer, which will appear below any links in the default slot. If content is provided in this slot, the text prop will be ignored.

GvFooterMetaItem

Props

Name	Type	Description
text	string	Text for the meta link item. If content is provided in the default slot, this prop will be ignored.
href	string	Href attribute for the meta link item.
component	string|object	The component used to render the link, for example RouterLink. Defaults to 'a'.

Slots

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

GvFooterNavigation

Props

Name	Type	Description
title required	string	Title for the navigation section
columns	number	Amount of columns to display items in navigation section. Allowed values: 1, 2, 3. Defaults to 1.
width	string	Width of each navigation section in the footer. You can pass any GOV.UK Design System grid width here. Allowed values: full, one-half, one-third, two-thirds, one-quarter, three-quarters. Defaults to 'full'.

Slots

Name	Description
default	A list of GvFooterNavigationItems

GvFooterNavigationItem

Props

Name	Type	Description
text	string	Text for the navigation link item. If content is provided in the default slot, this prop will be ignored.
href	string	Href attribute for the navigation link item.
component	string|object	The component used to render the link, for example RouterLink. Defaults to 'a'.

Slots

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