Skip to content



In the 2.0.0 version, component was divided into three parts: Header,Body and Footer. This was done to make it easier to use the restyling component. Also, got an optional Back button.


SidePanel is a component for displaying the sliding panel with content. It's also can be called just panel or drawer.

Use SidePanel when it is needed:

  • to show sub-tasks, additional support information and links that may be useful to the user when working with a report, a specific widget or the whole product;
  • to keep the user in the context of the page (even if SidePanel has an overlay).

Use Modal windows to show important information or request a response from the user.

For example, you can use SidePanel as:

  • Notification center for the whole website;
  • Help Center or News panel in products;
  • "panels" on mobile devices.


  • News icon in the main header of the website.
  • Additional link in ProductHead.
  • Controls inside the report that hide additional information.
  • Charts inside the report, which can be clicked to show additional information.
  • On small screens other controls can serve as a trigger to open SidePanel.

Component composition

  1. SidePanel
  2. SidePanel.Header
    • SidePanel.Back
    • SidePanel.Title
  3. SidePanel.Close (optional)
  4. SidePanel.Body
  5. SidePanel.Footer (optional)
  6. SidePanel.Overlay (optional)


Appearance example Styles When to use
Without overlay In this case the panel has the shadow: box-shadow: 0px 1px 12px var(--box-shadow-popper). There is no overlay. Use this version if you need to show additional information for a report/product/block.
With overlay In this case panel has an overlay with styles: background-color: var(--overlay-primary). There is no shadow. If you need to focus the user on information inside SidePanel, enable overlay.

Default sizes and indents


SidePanel has a fixed width that does not change when the browser window is resized. Default width of the panel is 256px. You can change it if necessary.


The component has a default padding. It can be changed if necessary.

It can be changed, for example, when using SidePanel on a small screen where you want to reduce paddings.

Content margins

The padding between title and content:

Common styles and recommendations

For panel's title use 16px text (--fs-300, --lh-300) with font-weight: var(--bold).

Pin header when scrolling large content inside the SidePanel.

Appearance example Styles
height: 52px, padding-bottom: var(--spacing-1x), align-items: center, border-bottom: 1px solid var(–-border-primary)
Close icon has L size and use --icon-secondary-neutral token for color. Click zone of the icon is 48px * 48px.


General recommendations for SidePanel content styles:

  • Choose the text size for the panel in order to maintain a hierarchy of headers in the content within SidePanel. If necessary, you can experiment and use your text size hierarchy within our typographic scale.

  • Always pin the header and the footer, when scrolling the content of the SidePanel.

You can place common controls for SidePanel content in the footer.

  • Typically, any controls, CTA or other elements like ProgressBar can be placed there.
  • The recommended size of controls in the panel on the desktop is M. Depending on the context, use M or L controls in the panel on small screens.

Footer styles:

height: 44px;
padding: var(--spacing-2x) 0;
align-items: center;
border-top: 1px solid var(–-border-primary);


Placement in the interface

  • You can customize whether the SidePanel should open in the product area or over the entire website (as modal windows do). If the SidePanel refers to a specific product, it should be rendered in the product under the main header.
  • The focus remains inside the SidePanel and does not move to the page content. You can navigate through the controls inside the SidePanel using Tab.

Page scroll

You can enable or disable page scroll. It's disabled by default.

Page scrolling should be enabled when SidePanel has some tips and additional things for the page.

It is important to disable page scroll for SidePanel with overlay, otherwise it will look like a bug.

SidePanel opening and closing

You can close the panel with:

  • CTA control;
  • Close icon;
  • Clicking outside the area of the panel (at overlay), optional;
  • Esc key.

SidePanel can be opened either by user clicking on the corresponding trigger or by the system in special cases to draw attention to the information in the panel.

Animation of appearance and hiding

SidePanel opens and closes with the animation: transition: all 350ms ease-in-out.

What happens when the browser window size changes

  • SidePanel has a fixed width that does not change when the browser window is resized. Default width of the panel is 256px. You can change it if necessary.
  • On a 320px screen, SidePanel should not occupy more than 80% of the screen width so that the user can click outside of it and close it.

Corner states

SidePanel should have header in all cases.

Initial load

At the initial load of the SidePanel content, show the content structure with Skeleton.


When loading and reloading SidePanel content, show Spin with XL size in the center.


If an error occurs during data loading, show the the corresponding message and the "Try again" button to reload the SidePanel content.