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 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"
}
]
}
}
} %>