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: "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 and 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 cta and step by steps (preview)
<%= 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
}
]
}
}
}
]
}
}
} %>