1. Government Frontend Component Guide
  2. Contextual sidebar

Component

Contextual sidebar

Sidebar 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.

There are 2 variants of the component:

It must always be used with the contextual breadcrumbs component.

Search for usage of this component on GitHub

How it looks (preview all)

How to call this component

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

Accessibility acceptance criteria

Components called by this component must be accessible

Other examples

With step by step (preview)

<%= render "govuk_publishing_components/components/contextual_sidebar", {
  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"
        },
        {
          title: "Walk your micropig: step by step",
          base_path: "/porgs-step-by-step"
        }
      ],
      ordered_related_items: [
        {
          title: "Find an apprenticeship",
          base_path: "/apply-apprenticeship"
        }
      ]
    }
  }
} %>