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

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

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