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:

• Step by step, which uses the step by step nav
• Related navigation, which uses the related navigation component in the context of a sidebar

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_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 part of 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"
        }
      ]
    }
  }
} %>

With current step by step (preview)

<%= render "govuk_publishing_components/components/contextual_sidebar", {
  content_item: {
    title: "A content item",
    links: {
      part_of_step_navs: [
        {
          title: "Learn to drive a car: step by step",
          base_path: "/micropigs-vs-micropugs",
          details: {
            step_by_step_nav: {
              title: "Stay in the UK after it leaves the EU ('settled status'): step by step",
              steps: [
                {
                  title: "Check you're allowed to drive",
                  contents: [
                    {
                      type: "paragraph",
                      text: "Most people can start learning to drive when they’re 17."
                    },
                    {
                      type: "list",
                      contents: [
                        {
                          text: "Check what age you can drive",
                          href: "/vehicles-can-drive"
                        }
                      ]
                    }
                  ],
                  optional: false
                },
                {
                  title: "Testing the and",
                  logic: "and",
                  contents: [
                    {
                      type: "paragraph",
                      text: "hello hello what's UP"
                    }
                  ]
                },
                {
                  title: "Driving lessons and practice",
                  contents: [
                    {
                      type: "paragraph",
                      text: "You need a provisional driving licence to take lessons or practice."
                    },
                    {
                      type: "list",
                      contents: [
                        {
                          text: "The Highway Code",
                          href: "/guidance/the-highway-code"
                        }
                      ]
                    }
                  ],
                  optional: false
                }
              ]
            }
          }
        }
      ]
    }
  }
} %>

With ukraine cta (preview)

For documents tagged to the Ukraine topical event we show a custom ‘Ukraine Invasion’ call to action element.

<%= render "govuk_publishing_components/components/contextual_sidebar", {
  content_item: {
    title: "UK forces arrive to reinforce NATO’s eastern flank",
    content_id: "a342fd46-d801-4c1e-9d8f-f41fba6da563",
    locale: "en",
    links: {
      ordered_related_items: [
        {
          title: "Protecting the UK and promoting a Global Britain",
          base_path: "/government/collections/protecting-the-uk-and-promoting-a-global-britain",
          locale: "en"
        }
      ],
      topical_events: [
        {
          content_id: "bfa79635-ffda-4b5d-8266-a9cd3a03649c",
          title: "Russian invasion of Ukraine: UK government response",
          base_path: "/government/topical-events/russian-invasion-of-ukraine-uk-government-response",
          locale: "en"
        }
      ]
    }
  }
} %>