Related Navigation example

With extensive world locations

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.

How it looks (preview)

How to call this example

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