1. 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) (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)

  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 brexit and other related links (preview)

<%= render "govuk_publishing_components/components/contextual_sidebar", {
  content_item: {
    title: "A content item",
    links: {
      taxons: [
        {
          content_id: "test",
          title: "Not Brexit",
          phase: "live",
          links: {
            parent_taxons: [
              {
                content_id: "d6c2de5d-ef90-45d1-82d4-5f2438369eea",
                title: "Brexit"
              }
            ]
          }
        }
      ],
      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"
        }
      ]
    }
  }
} %>

With brexit related links and step by steps (preview)

  1. Step 1 Check if you need to apply to the EU Settlement Scheme

    You may need to apply to the EU Settlement Scheme to continue living in the UK.

    1. Check if you need to apply
  2. Step 2 Find out what status you’ll get

    You’ll get settled or pre-settled status depending on how long you’ve been living in the UK. This might affect when you choose to apply.

    1. Find out what you’ll get
<%= render "govuk_publishing_components/components/contextual_sidebar", {
  content_item: {
    title: "A content item",
    links: {
      taxons: [
        {
          content_id: "d6c2de5d-ef90-45d1-82d4-5f2438369eea",
          title: "Brexit",
          phase: "live"
        }
      ],
      part_of_step_navs: [
        {
          title: "Choosing a micropig or micropug: 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 if you need to apply to the EU Settlement Scheme",
                  contents: [
                    {
                      type: "paragraph",
                      text: "You may need to apply to the EU Settlement Scheme to continue living in the UK. "
                    },
                    {
                      type: "list",
                      contents: [
                        {
                          text: "Check if you need to apply",
                          href: "/settled-status-eu-citizens-families/eligibility"
                        }
                      ]
                    }
                  ],
                  optional: false
                },
                {
                  title: "Find out what status you’ll get",
                  contents: [
                    {
                      type: "paragraph",
                      text: "You’ll get settled or pre-settled status depending on how long you’ve been living in the UK. This might affect when you choose to apply."
                    },
                    {
                      type: "list",
                      contents: [
                        {
                          text: "Find out what you’ll get",
                          href: "/settled-status-eu-citizens-families/what-settled-and-presettled-status-means"
                        }
                      ]
                    }
                  ],
                  optional: false
                }
              ]
            }
          }
        }
      ]
    }
  }
} %>

With brexit cta (preview)

For documents tagged with certain taxons defined in brexit_cta_taxon_allow_list we show a custom Brexit call to action element.

<%= render "govuk_publishing_components/components/contextual_sidebar", {
  content_item: {
    title: "Transport news story",
    content_id: "3c402d90-fe77-49b9-a8aa-1800d4fc2b3d",
    locale: "en",
    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"
        }
      ],
      taxons: [
        {
          content_id: "a4038b29-b332-4f13-98b1-1c9709e216bc",
          title: "Transport",
          phase: "live"
        }
      ]
    }
  }
} %>

With brexit cta document exception (preview)

Illustrates an exception to showing the custom Brexit call to action element as defined in brexit_cta_document_type_exceptions.

<%= render "govuk_publishing_components/components/contextual_sidebar", {
  content_item: {
    title: sanitize("30 creative teams awarded up to £100,000 each for Festival UK* 2022 R&D project"),
    content_id: "c3752802-f091-43a9-ba90-33568fccf391",
    locale: "en",
    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"
        }
      ],
      taxons: [
        {
          content_id: "e2ca2f1a-0ff3-43ce-b813-16645ff27904",
          title: "Society and culture",
          phase: "live"
        }
      ]
    }
  }
} %>

With brexit cta taxon exception (preview)

Illustrates an exception to showing the custom Brexit call to action element as defined in brexit_cta_taxon_exception_list.

<%= render "govuk_publishing_components/components/contextual_sidebar", {
  content_item: {
    title: "Local transport news story",
    content_id: "5c82db20-7631-11e4-a3cb-005056011aef",
    locale: "en",
    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"
        }
      ],
      taxons: [
        {
          content_id: "3b4d6319-fcef-4637-b35a-e3df76321894",
          title: "Local transport",
          phase: "live",
          links: {
            parent_taxons: [
              {
                content_id: "a4038b29-b332-4f13-98b1-1c9709e216bc",
                title: "Transport"
              }
            ]
          }
        }
      ]
    }
  }
} %>