1. Component Guide
  2. Related Navigation
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 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 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"
        }
      ]
    }
  }
} %>