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.
The COVID CTA will displayed on all pages except for a few exemptions documented below.
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 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: "2f8b848d-23c8-4f42-a41a-df1f81c64d0f",
title: "Exporting",
phase: "live"
}
]
}
}
} %>With covid cta taxon exception (preview)
The COVID Booster call to action element is not displayed on content tagged to taxons in covid_booster_cta_taxon_exception_list.
<%= render "govuk_publishing_components/components/contextual_sidebar", {
content_item: {
title: "A content item",
links: {
taxons: [
{
content_id: "ac7b8472-5d09-4679-9551-87847b0ac827",
title: "Not Covid",
phase: "live"
}
],
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 covid cta document type exception (preview)
Illustrates an exception to showing the custom COVID Booster call to action element as defined in covid_booster_cta_document_type_exceptions.
<%= render "govuk_publishing_components/components/contextual_sidebar", {
content_item: {
title: "A content item",
document_type: "smart_answer",
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"
}
]
}
}
} %>