Side panel

Component checklist

Basics

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.

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.

 

Anatomy

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.

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.

 

Behavior

• 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