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

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 (defaults to no margin)
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 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"
        }
      ]
    }
  }
} %>