Component
Related Navigation
Component showing related content, including topics, guidance and collections
How it looks (preview) (preview all)
How to call this component
<%= render "govuk_publishing_components/components/related_navigation", {
content_item: {
links: {
ordered_related_items: [
{
title: "Find an apprenticeship",
base_path: "/apply-apprenticeship"
},
{
title: "Training and study at work",
base_path: "/training-study-work-your-rights"
},
{
title: "Careers helpline for teenagers",
base_path: "/careers-helpline-for-teenagers"
}
]
}
}
} %>Accessibility acceptance criteria
- Should have a role of ‘navigation’ on any navigation elements inside the component
- Should be marked up as navigation and not as tangential content
Links in the component must:
- accept focus
- be focusable with a keyboard
- be usable with a keyboard
- indicate when they have focus
- change in appearance when touched (in the touch-down state)
- change in appearance when hovered
- be usable with touch
- be usable with voice commands
- have visible text
- have meaningful text
Other examples
With curated topics (preview)
<%= render "govuk_publishing_components/components/related_navigation", {
content_item: {
links: {
topics: [
{
title: "Apprenticeships, 14 to 19 education and training for work",
base_path: "/browse/education/find-course",
document_type: "topic"
},
{
title: "Finding a job",
base_path: "/browse/working/finding-job",
document_type: "topic"
},
{
title: "Apprenticeships",
base_path: "/topic/further-education-skills/apprenticeships",
document_type: "topic"
}
]
}
}
} %>With mainstream browse pages (preview)
<%= render "govuk_publishing_components/components/related_navigation", {
content_item: {
links: {
mainstream_browse_pages: [
{
title: "Driving licences",
base_path: "/browse/driving/driving-licences",
document_type: "mainstream_browse_page"
},
{
title: "Driving tests and learning to drive or ride",
base_path: "/browse/driving/learning-to-drive",
document_type: "mainstream_browse_page"
}
]
}
}
} %>With taxons (preview)
<%= render "govuk_publishing_components/components/related_navigation", {
content_item: {
links: {
taxons: [
{
title: "Driving instruction and driving lessons",
base_path: "/transport/driving-instruction-and-driving-lessons",
phase: "live",
document_type: "taxon"
}
]
}
}
} %>With curated topics and mainstream browse pages (preview)
Currated topics and mainstream browse pages are combined.
<%= render "govuk_publishing_components/components/related_navigation", {
content_item: {
links: {
mainstream_browse_pages: [
{
title: "Driving licences",
base_path: "/browse/driving/driving-licences",
document_type: "mainstream_browse_page"
},
{
title: "Driving tests and learning to drive or ride",
base_path: "/browse/driving/learning-to-drive",
document_type: "mainstream_browse_page"
}
],
topics: [
{
title: "Cars",
base_path: "/topic/driving-tests-and-learning-to-drive/car",
document_type: "topic"
}
]
}
}
} %>With curated topics and mainstream browse pages and taxons (preview)
Currated topics and mainstream browse pages take precedence over the sidewide topic taxonomy.
<%= render "govuk_publishing_components/components/related_navigation", {
content_item: {
links: {
mainstream_browse_pages: [
{
title: "Driving licences",
base_path: "/browse/driving/driving-licences",
document_type: "mainstream_browse_page"
},
{
title: "Driving tests and learning to drive or ride",
base_path: "/browse/driving/learning-to-drive",
document_type: "mainstream_browse_page"
}
],
taxons: [
{
title: "Driving instruction and driving lessons",
base_path: "/transport/driving-instruction-and-driving-lessons",
phase: "live",
document_type: "taxon"
}
],
topics: [
{
title: "Cars",
base_path: "/topic/driving-tests-and-learning-to-drive/car",
document_type: "topic"
}
]
}
}
} %>With collections (preview)
<%= render "govuk_publishing_components/components/related_navigation", {
content_item: {
links: {
document_collections: [
{
title: "Recruit an apprentice (formerly apprenticeship vacancies)",
base_path: "/government/collections/apprenticeship-vacancies",
document_type: "document_collection"
},
{
title: "The future of jobs and skills",
base_path: "/government/collections/the-future-of-jobs-and-skills",
document_type: "document_collection"
}
]
}
}
} %>With topical events (preview)
<%= render "govuk_publishing_components/components/related_navigation", {
content_item: {
links: {
topical_events: [
{
title: "UK-China High-Level People to People Dialogue 2017",
base_path: "/government/topical-events/uk-china-high-level-people-to-people-dialogue-2017",
document_type: "topical_event"
}
]
}
}
} %>With world locations (preview)
<%= render "govuk_publishing_components/components/related_navigation", {
content_item: {
links: {
world_locations: [
{
title: "South Sudan",
base_path: "/world/south-sudan/news"
},
{
title: "USA",
base_path: "/world/usa/news"
}
]
}
}
} %>With extensive world locations (preview)
The component handles having a long list of content passed to it, by only showing the first few items and hiding the rest behind a Show More toggle.
<%= render "govuk_publishing_components/components/related_navigation", {
content_item: {
links: {
world_locations: [
{
title: "Algeria",
base_path: "/world/algeria/news"
},
{
title: "Austria",
base_path: "/world/austria/news"
},
{
title: "Belarus",
base_path: "/world/belarus/news"
},
{
title: "Belgium",
base_path: "/world/belgium/news"
},
{
title: "Bolivia",
base_path: "/world/bolivia/news"
},
{
title: "Brazil",
base_path: "/world/brazil/news"
},
{
title: "Canada",
base_path: "/world/canada/news"
},
{
title: "Chile",
base_path: "/world/chile/news"
},
{
title: "China",
base_path: "/world/China/news"
},
{
title: "Cuba",
base_path: "/world/cuba/news"
},
{
title: "Denmark",
base_path: "/world/denmark/news"
},
{
title: "Egypt",
base_path: "/world/egypt/news"
},
{
title: "Fiji",
base_path: "/world/fiji/news"
},
{
title: "Finland",
base_path: "/world/finland/news"
},
{
title: "France",
base_path: "/world/france/news"
},
{
title: "Germany",
base_path: "/world/germany/news"
},
{
title: "Greece",
base_path: "/world/greece/news"
},
{
title: "Norway",
base_path: "/world/norway/news"
},
{
title: "Russia",
base_path: "/world/russia/news"
},
{
title: "Sweden",
base_path: "/world/sweden/news"
},
{
title: "United Kingdom",
base_path: "/world/united-kingdom/news"
},
{
title: "USA",
base_path: "/world/usa/news"
}
]
}
}
} %>With quick links (preview)
<%= render "govuk_publishing_components/components/related_navigation", {
content_item: {
details: {
quick_links: [
{
title: "Money Laundering Regulations: introduction",
url: "https://www.gov.uk/money-laundering-regulations-introduction"
},
{
title: "Money Laundering Regulations: report suspicious activities",
url: "https://www.gov.uk/money-laundering-regulations-report-suspicious-activities"
}
]
}
}
} %>With different languages (preview)
Each link can have a locale parameter to set the correct lang attribute.
If the link locale is the same as the document locale, then the lang attribute won’t be used. For example, lang="en" won’t appear on a page written in English.
<%= render "govuk_publishing_components/components/related_navigation", {
content_item: {
links: {
ordered_related_items: [
{
title: "Find an apprenticeship (French)",
base_path: "/apply-apprenticeship.fr",
locale: "fr"
}
],
topics: [
{
title: "Apprenticeships, 14 to 19 education and training for work (Korean)",
base_path: "/browse/education/find-course.ko",
document_type: "topic",
locale: "ko"
}
],
topical_events: [
{
title: "UK-China High-Level People to People Dialogue 2017 (Spanish)",
base_path: "/government/topical-events/uk-china-high-level-people-to-people-dialogue-2017.es",
document_type: "topical_event",
locale: "es"
}
],
related: [
{
title: "Jam producers (Spanish)",
base_path: "/jam-producers.es",
document_type: "contact",
locale: "es"
}
],
related_statistical_data_sets: [
{
title: "International road fuel prices (Italian)",
base_path: "/government/statistical-data-sets/comparisons-of-industrial-and-domestic-energy-prices-monthly-figures.it",
document_type: "statistical_data_set",
locale: "it"
}
],
document_collections: [
{
title: "Recruit an apprentice (formerly apprenticeship vacancies)",
base_path: "/government/collections/apprenticeship-vacancies",
document_type: "document_collection",
locale: "en"
}
],
world_locations: [
{
title: "South Sudan (Arabic)",
base_path: "/world/south-sudan/news.ar",
locale: "ar"
}
]
},
details: {
external_related_links: [
{
url: "http://media.slc.co.uk/sfe/1718/ft/sfe_terms_and_conditions_guide_1718_d.pdf",
title: "Student loans: terms and conditions 2017 to 2018 (PDF, 136KB)",
locale: "en"
}
]
}
}
} %>With ga4 tracking (preview)
Adds Google Analytics 4 tracking to the component, using the GA4 link tracker.
<%= render "govuk_publishing_components/components/related_navigation", {
ga4_tracking: true,
content_item: {
links: {
ordered_related_items: [
{
title: "Find an apprenticeship",
base_path: "/apply-apprenticeship"
},
{
title: "Training and study at work",
base_path: "/training-study-work-your-rights"
},
{
title: "Careers helpline for teenagers",
base_path: "/careers-helpline-for-teenagers"
}
],
topics: [
{
title: "Apprenticeships, 14 to 19 education and training for work",
base_path: "/browse/education/find-course",
document_type: "topic"
},
{
title: "Finding a job",
base_path: "/browse/working/finding-job",
document_type: "topic"
},
{
title: "Apprenticeships",
base_path: "/topic/further-education-skills/apprenticeships",
document_type: "topic"
}
],
topical_events: [
{
title: "UK-China High-Level People to People Dialogue 2017",
base_path: "/government/topical-events/uk-china-high-level-people-to-people-dialogue-2017",
document_type: "topical_event"
}
],
world_locations: [
{
title: "Algeria",
base_path: "/world/algeria/news"
},
{
title: "Austria",
base_path: "/world/austria/news"
},
{
title: "Belarus",
base_path: "/world/belarus/news"
},
{
title: "Belgium",
base_path: "/world/belgium/news"
},
{
title: "Bolivia",
base_path: "/world/bolivia/news"
},
{
title: "Brazil",
base_path: "/world/brazil/news"
},
{
title: "Canada",
base_path: "/world/canada/news"
},
{
title: "Chile",
base_path: "/world/chile/news"
},
{
title: "China",
base_path: "/world/China/news"
}
]
}
}
} %>