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) (preview all)

Related content

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

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
  • 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 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)

Part of Learn to drive a car: step by step

  1. Step 1 Check you're allowed to drive

    Most people can start learning to drive when they’re 17.

    1. Check what age you can drive

  2. and Testing the and

    hello hello what's UP

  3. Step 2 Driving lessons and practice

    You need a provisional driving licence to take lessons or practice.

    1. The Highway Code 
<%= 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"
        }
      ]
    }
  }
} %>

Without ga4 tracking on step by step (preview)

Disables GA4 tracking on components within the sidebar. Tracking is enabled by default. Currently only the Related Navigation component, Step by Step navigation component and Ukraine CTA accept this option.

Part of What to do when someone dies: step by step

  1. Step 1 Register the death

    1. Register the death

  2. Step 2 Arrange the funeral

    1. Arrange the funeral 
<%= render "govuk_publishing_components/components/contextual_sidebar", {
  disable_ga4: true,
  content_item: {
    title: "A content item",
    links: {
      part_of_step_navs: [
        {
          title: "What to do when someone dies: step by step",
          base_path: "/when-someone-dies",
          details: {
            step_by_step_nav: {
              title: "What to do when someone dies: step by step",
              steps: [
                {
                  title: "Register the death",
                  contents: [
                    {
                      type: "list",
                      contents: [
                        {
                          text: "Register the death",
                          href: "/after-a-death"
                        }
                      ]
                    }
                  ],
                  optional: false
                },
                {
                  title: "Arrange the funeral",
                  contents: [
                    {
                      type: "list",
                      contents: [
                        {
                          text: "Arrange the funeral",
                          href: "/after-a-death/arrange-the-funeral"
                        }
                      ]
                    }
                  ],
                  optional: false
                }
              ]
            }
          }
        }
      ]
    }
  }
} %>

Without ga4 tracking on part of step by step heading(s) (preview)

Disables GA4 tracking on the “Part of” step by step heading(s) in the sidebar. Tracking is enabled by default. Currently only the Related Navigation component, Step by Step navigation component and Ukraine CTA accept this option.

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