What it is
A side panel offers a light-weight, quick action that’s complementary to what’s happening in the main page. They can contain almost any component, as long as they still feel light-weight.
Only use a side panel when its contents are relevant and strongly connected to what the user sees in the main page.
When to use
- Show additional information or contextual help, e.g. FAQ content
- Allow for actions that require minimal user input and that are no longer than 1 step
When not to use (and what to use instead)
|
Don’t use a side panel for… |
… and instead, use: |
|---|---|
|
Flows of any length |
Child page |
|
Forms |
Child page |
|
Content that requires a confirm before exiting dialogue (e.g. “Are you sure…?” dialogues) or any other type of dialogue |
. Same content in a different format that avoids the need for a dialogue, or . Child page |
|
Content that includes large images, tables, or elements that require horizontal scrolling |
. Same content in a different format that prevents horizontal scrolling, or . Child page |
|
Information essential to the user’s success |
Put in original page |
|
Critical information for the user |
. Put in original page, or . Put in a dialogue (e.g. “Are you sure…?”) |
Guidelines
- Side panel height extends to the top and bottom of the viewport (covering the navigation)
- Side panel is always fixed to the right side of the page
- Use a scrim to cover the main content when the side panel is triggered
Scrolling
- Avoid horizontal scrolling, always
- Avoid vertical scrolling as much as possible
- If the panel scrolls vertically, the primary CTA must remain visible (sticked) at the bottom
Closing the side panel:
- Side panel closes upong tapping/clicking the scrim or the dismiss icon
- Don’t use an exit confirmation dialogue
Examples
Do: Side panel for contextual help
Do: Side panel as a bottom sheet for native
Don’t: Side panel for a checkout flow
