Component

Related Navigation

Component showing related content, including topics, guidance and collections

Search for usage of this component on GitHub.

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

Standard options

This component uses the component wrapper helper. It accepts the following options and applies them to the parent element of the component. See the component wrapper helper documentation for more detail.

id - accepts a string for the element ID attribute
data_attributes - accepts a hash of data attributes
aria - accepts a hash of aria attributes
classes - accepts a space separated string of classes, these should not be used for styling and must be prefixed with js-
margin_bottom - accepts a number from 0 to 9 (0px to 60px) using the GOV.UK Frontend spacing scale
role - accepts a space separated string of roles
lang - accepts a language attribute value
open - accepts an open attribute value (true or false)
hidden - accepts an empty string, ‘hidden’, or ‘until-found’
tabindex - accepts an integer. The integer can also be passed as a string
dir - accepts ‘rtl’, ‘ltr’, or ‘auto’
type - accepts any valid type attribute e.g. ‘button’, ‘submit’, ‘text’
rel - accepts any valid rel attribute e.g. ‘nofollow’
target - accepts a valid target attribute e.g. ‘_blank’
title - accepts any string
draggable - accepts a draggable attribute value (“true” or “false”)

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 mainstream browse pages and taxons (preview)

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"
        }
      ]
    }
  }
} %>

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 external related links (preview)

The component can accept other related links, such as external links or other contacts.

<%= render "govuk_publishing_components/components/related_navigation", {
  content_item: {
    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)"
        },
        {
          url: "https://www.thestudentroom.co.uk/content.php?r=5967-Repaying-your-student-loan",
          title: "The Student Room: repaying your student loan"
        }
      ]
    }
  }
} %>

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 related statistical data sets (preview)

<%= render "govuk_publishing_components/components/related_navigation", {
  content_item: {
    links: {
      related_statistical_data_sets: [
        {
          title: "International road fuel prices",
          base_path: "/government/statistical-data-sets/comparisons-of-industrial-and-domestic-energy-prices-monthly-figures",
          document_type: "statistical_data_set"
        },
        {
          title: "Weekly road fuel prices",
          base_path: "/government/statistical-data-sets/oil-and-petroleum-products-weekly-statistics",
          document_type: "statistical_data_set"
        }
      ]
    }
  }
} %>

With related contacts (preview)

<%= render "govuk_publishing_components/components/related_navigation", {
  content_item: {
    links: {
      related: [
        {
          title: "Pest Control",
          base_path: "/pest-control",
          document_type: "contact"
        }
      ]
    }
  }
} %>

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"
        }
      ],
      mainstream_browse_pages: [
        {
          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 all related-content (preview)

<%= 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"
        }
      ],
      mainstream_browse_pages: [
        {
          title: "Apprenticeships, 14 to 19 education and training for work",
          base_path: "/browse/education/find-course",
          document_type: "mainstream_browse_page"
        },
        {
          title: "Finding a job",
          base_path: "/browse/working/finding-job",
          document_type: "mainstream_browse_page"
        }
      ],
      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"
        }
      ],
      related: [
        {
          title: "Pest Control",
          base_path: "/pest-control",
          document_type: "contact"
        }
      ],
      related_statistical_data_sets: [
        {
          title: "International road fuel prices",
          base_path: "/government/statistical-data-sets/comparisons-of-industrial-and-domestic-energy-prices-monthly-figures",
          document_type: "statistical_data_set"
        },
        {
          title: "Weekly road fuel prices",
          base_path: "/government/statistical-data-sets/oil-and-petroleum-products-weekly-statistics",
          document_type: "statistical_data_set"
        }
      ],
      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"
        }
      ],
      world_locations: [
        {
          title: "South Sudan",
          base_path: "/world/south-sudan/news"
        },
        {
          title: "USA",
          base_path: "/world/usa/news"
        }
      ]
    },
    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)"
        },
        {
          title: "The Student Room repaying your student loan",
          url: "https://www.thestudentroom.co.uk/content.php?r=5967-Repaying-your-student-loan"
        }
      ]
    }
  }
} %>

Without ga4 tracking (preview)

Disables GA4 tracking on the banner. Tracking is enabled by default and uses the GA4 link tracker.

<%= render "govuk_publishing_components/components/related_navigation", {
  disable_ga4: 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"
        }
      ],
      mainstream_browse_pages: [
        {
          title: "Apprenticeships, 14 to 19 education and training for work",
          base_path: "/browse/education/find-course",
          document_type: "mainstream_browse_page"
        },
        {
          title: "Finding a job",
          base_path: "/browse/working/finding-job",
          document_type: "mainstream_browse_page"
        }
      ],
      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"
        }
      ]
    }
  }
} %>

Related Navigation

How it looks (preview) (preview all)

Related content

How to call this component

Accessibility acceptance criteria

Other examples

Standard options

With mainstream browse pages (preview)

Related content

With taxons (preview)

Related content

With mainstream browse pages and taxons (preview)

Related content

With collections (preview)

Related content

With topical events (preview)

Related content

With world locations (preview)

Related content

With external related links (preview)

Related content

With extensive world locations (preview)

Related content

With quick links (preview)

Related content

With related statistical data sets (preview)

Related content

With related contacts (preview)

Related content

With different languages (preview)

Related content

With all related-content (preview)

Related content

Without ga4 tracking (preview)

Related content