Side panel

The side panel serves to focus the user’s attention on several tasks or pieces of information via a window that sits on top of the page content.

Component checklist


Review required


In development


Use the side panel to focus the user’s attention on a larger amount of information or actions complementing the further function of the platform.

Usage - Preview

When the side panel appears,

  • it disables all app functionality and remains on the screen until the user confirms, dismisses, or performs the required action.
  • it appears together with an overlay covering the whole interface (except the side panel).
  • it has a close button in the top left corner.

Aim to use one side panel at a time. Exceptionally, it's possible to stack multiple side panels one over each other. However, this is not a recommended behavior.



The side panel is defined by the header, content, and actions. The header always contains a title and can be supplemented by components including select or input, among others. The content part is variable. For the action always use one CTA plus a secondary or tertiary button.

Simple side panel

Simple side panel

Side panel with navigation

Side panel with navigation

  1. Header
    The header is a variable area containing a title and can be supplemented by components including tabs, select, input, or others. For more details, see header variations.
  2. Content
    The content area contains elements that the users need to interact with, for example, inputs, selects, lists of users, profiles, or labels.
  3. Actions
    The area show always has at least one CTA button. It can be increased by secondary action, e.g. cancel or checkbox element.
  4. Close button
    Each side panel has a close button as a default option for closing it. This button has the same function as a cancel button.
  5. Navigation
    In case the content needs to be split into more categories, you can use the navigation on the left in the side panel.



  • The side panel always appears over the whole interface, even over the main navigation, and it’s supported by an underlay to increase its focus.
  • It’s by default positioned to the right side of the screen and it fills 100 % height of it.
  • There's an animation when the side panel appears: a 200ms Move in Right, Ease In And Out effect.
  • It's possible to stack multiple side panels one over the other. However, this is an unrecommended behavior.


The side panel is dismissed when

  • Pressing outside of the dialogue
  • Pressing the “Cancel” button
  • Pressing close button
  • Pressing the ESC key
  • Pressing the Enter key if the “Cancel” button is focused


The side panel is confirmed when

  • Pressing the CTA button
  • Pressing the Enter key if the CTA button is focused