Component

Contextual footer

Footer that shows different things depending on the page

This is a component that calls other components. For more accurate preview with real data, see the contextual navigation preview.

It will render the related navigation component in the context of a footer if the content item is not part of a step by step.

It must always be used with the contextual breadcrumbs component.

Search for usage of this component on GitHub.

How it looks (preview) (preview all)

How to call this component

<%= render "govuk_publishing_components/components/contextual_footer", {
  content_item: {
    title: "A content item",
    links: {
      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"
        }
      ],
      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"
        }
      ]
    }
  }
} %>

Accessibility acceptance criteria

Components called by this component must be accessible

Other examples

With step by step (preview)

<%= render "govuk_publishing_components/components/contextual_footer", {
  content_item: {
    title: "A content item",
    links: {
      part_of_step_navs: [
        {
          title: "Choosing a micropig or micropug: step by step",
          base_path: "/micropigs-vs-micropugs"
        }
      ],
      ordered_related_items: [
        {
          title: "Find an apprenticeship",
          base_path: "/apply-apprenticeship"
        }
      ]
    }
  }
} %>

Without ga4 tracking (preview)

Disables GA4 tracking on the component. Tracking is enabled by default.

<%= render "govuk_publishing_components/components/contextual_footer", {
  disable_ga4: true,
  content_item: {
    title: "A content item",
    links: {
      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"
        }
      ],
      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"
        }
      ]
    }
  }
} %>