Sidebar

ECT approvedUpdated May 21, 2026

Description

A Sidebar is a panel that allows the user to perform a task without leaving their current page.
It opens when the user selects an element on the page.
It's anchored to the right edge of the viewport.
Sidebars are generally dismissible and are used to present more self-contained or higher-level content, like navigation, settings, or workflows that require focused input.
They are typically used to present secondary content that temporarily shifts attention away from the main view.

Warning

Choosing the right component Both Drawers and Sidebars are used to present secondary content alongside a main view, but they serve different purposes: A Drawer is designed as a companion to the main content. Choose it when users need to see both main page content and supporting content at the same time. For example, viewing their manager's OKRs when generating their own OKRs. A Sidebar is designed to capture the user’s full attention by masking the main content behind a background overlay. Choose it for filtering or for creating objects such as contacts or invoices.

Anatomy

Anatomy

Types

Sidebar has 2 types: Modal and Adaptive.

Use for viewports 1535 px or less.
For consistency across apps, smart defaults govern sidebar behaviour and positioning.
These can be overridden for specific product needs, but the final layout depends on viewport width.

Viewport 769 to 1535px

Viewport 768px or less

Use for viewports 1536px or more.
Includes an inverse (dark theme) variant.

Viewport 1536px or more

No sidebar

Zoom behavior

The small screen breakpoint (768px or less) also activates on larger screens when the user zooms in.
This is the breakpoint where the modal sidebar switches to full screen mode.
Sticky headers and footers should become non-sticky for better access to content.
At 400 per cent zoom:
only the browser scrollbar should be visible
content should adapt responsively
the 16px margin and background mask should be removed
The same behaviour occurs when a user drags and significantly reduces the browser window size.
It can also be triggered when viewing on a mobile screen in landscape.

Variations

With header icon

With subheading

With AI keyline

With footer

With scroll

Inverse

Best practices

A sidebar should load content dynamically without refreshing the page.
Avoid horizontal scroll on the sidebar or content.
On large screens, make the header sticky so it's always visible when a user scrolls vertically.

Dos and don'ts

Technical example

Adaptive sidebar component implemented in Carbon

Sidebar component implemented in Carbon

Requirements

Users should be able to:

Open and close the sidebar using assistive technology.
Navigate to and interact with all interactive elements within the sidebar.
Scroll the sidebar to access all sidebar content.

Interactions

Sidebars should be triggered from user action on a button. Sidebars should not be triggered from other elements or indirect user actions.

Keyboard interactions

Enter or Space. Triggers the sidebar from a button.
Focus should be pulled to the sidebar itself.
Tab. Moves focus to the first interactive element within the sidebar: the close button.
Pressing ‘tab’ within the sidebar moves focus between interactive elements.
After reaching the last interactive element within the sidebar, focus should move back to the first interactive element within the sidebar. Keyboard focus should cycle through the sidebar elements.
Escape. Closes the sidebar.
On sidebar close, focus should move back to the element that triggered the sidebar.

Design considerations

A sidebar should have a screen mask behind it, to keep users focused within the sidebar.
Do not overwhelm users by putting too much content in a single sidebar. Either step the sidebar or explore using a new page.
Make sure the sidebar has a clear, descriptive heading, describing its purpose.
Avoid overlaying dialogs or sidebars on top of each other.
Sticky headers and footers within sidebars should become fixed and the whole sidebar container should become scrollable on smaller screen sizes.

Development considerations

The sidebar should have role=”dialog” to allow screen reader users to identify its purpose.
The sidebar should have aria-modal=”true” to trap screen reader and keyboard focus within it.
Make sure that focus is returned to the trigger element when the sidebar is closed.
The modal should have a clear accessible name, provided though an aria-labelledby pointing at the unique id of the sidebar heading.
The sidebar heading should be a h1 clearly describing the purpose of content within the sidebar.
Make sure the close button in the sidebar has a clear accessible name, provided by an aria-label.

Date	Changes
November 2025	Added Choosing the right component.Simplified guidance on modal and adaptive sidebars, and zoom behavior.Added new variations.Removed optional header variation.
31 October 2025	Removed optional-header variation.
15 October 2025	Marked as ECT approved.Updated modal footers to use subtle button for cancel.Removed 1000px max width option. Now only 760px max-width is supported. This is a recommendation and not mandatory.Removed left alignment support.Removed vertical button example. Instead this is mentioned in the button page.Changed the ‘don’t’ example to show a more realistic scenario of a phone in landscape mode.
August 2025	Updated guidance on the accessibility tab.Updated image for Adaptive sidebar - zoom, to show the behavior.
22 July 2025	Added full screen mode to Adaptive sidebar for zoom and small screens.Added Dos and don'ts section.
July 2025	Added adaptive sidebar variationAdded inverse option for adaptive sidebarAdded "modal" term to the original sidebar componentAdded 2 new size options with a different max width for each of them
April 2025	Updated guidance to more clearly differentiate from the Drawer component.
November 2024	Updated AI border alignment & Responsive width usage and use cases.
October 2024	Updated Size & Responsive width.
September 2024	New version created. Previous version archived in the frozen Product design system.