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.
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 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)
-
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.
-
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.
Brexit
<%= 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",
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",
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",
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"
}
]
}
}
]
}
}
} %>