Side Panel

A container that slides in from the right hand edge of the screen, containing supplementary content and controls that enhance and don’t interrupt the primary user flow of a given page.

Unable to show component checklist block
Please select properties to show.

Usage Guidelines

❌ Don’t

Alter the width of the side sheet to accommodate the information you are inputting into the side sheet.

✅ Do

Use and select the appropriate size side sheet for the information you are hoping to display.

Header

The header element provides explicit guidance on the purpose and content of the side sheet. In addition to a title, an optional icon can be used as a visual aid.

❌ Don’t

Avoid including long and overly verbose that do not immediately express the purpose and goal of the side sheet’s contents.

✅ Do

Use short and immediately recognizable terms, ideally a two to three-word maximum length limit.

Behavior

Slide in Movement

When activated, the side sheet slides into the page from the right-hand side. As soon as the modal side sheet is activated, the shroud appears, and then the side sheet slides into the page.

Modal Side Sheet

Sliding in from the righthand side of the screen.

Scroll Behavior

When content is inserted into a side sheet that overflows the fixed height of the body container, the body element allows for scrolling. In contrast, the header and the footer elements remain fixed.

Scrolling

An example of content that goes past the height of a body container.

Large Variant

The large variant of the modal side sheet is measured at a fixed 960px width. This format is ideal for large supplementary data sets, and table sets you want your users to see.

Modal Side Sheet

Medium Variant

The medium variant of the modal side sheet has a fixed width of 560px width. In terms of its ideal usage, this variant is seen as the default form of the side sheet and is well suited to most supplementary flows found in Genesys Cloud.

Modal Side Sheet

Small Variant

The small variant of the modal side sheet is fixed at 400px width. Given its relatively small size, this variant is best suited to filtering and defining page tasks.

Modal Side Sheet

Content

Description

The description section provides high-level context to the contents within your side sheet. It’s best to keep this section short, readable, and scannable.

❌ Don’t

Avoid including your description in the header element of the side sheet.

✅ Do

Delineate and separate your header section from your description, using the divider as the mark of that separation.

External Link

External links are positioned below the side sheet description. They supplement the information in the description.

❌ Don’t

Don’t use the external link as space to open non-related pages.

✅ Do

Focus on using the external link as a place for further information. Pages found in the Resource Center and Developer Center are ideal places for the external link to redirect too.

Secondary Header

A secondary header is principally a space to visualize information that is relevant to the content/flow of a side sheet. The most appropriate use case for this section is within the context of wizards and the progression steppers found in them.

❌ Don’t

Don’t input a subtitle or another text header into this space.

✅ Do

Focus on using the primarily visual indicators and markings within this section.

Modals

A dialog that appears on top of the main content, disabling it, until the user explicitly interacts with the dialog.

Something looks broken on this site?

Report it to the Design System team here!

Side Panel

Component checklist