The modal variant of the Side Panel overlays on top of a given page. This type of Side Panel should be used for secondary user flows that are more complex and demand greater focus from users.
Sizes
Large Variant
The large variant of the modal side panel is measured at a fixed 960px width. This format is ideal for large supplementary data sets and table sets that you want your users to see.
Medium Variant
The medium variant of the modal side panel has a fixed width of 560px. In terms of its ideal usage, this variant is seen as the default form of the side panel and is well-suited to most supplementary flows found in Genesys Cloud.
Small Variant
The small variant of the modal side panel is fixed at 400px width. Given its relatively small size, this variant is best suited to filtering and defining page tasks.
Interactions
Slide in Movement
When activated, the side panel slides into the page from the right-hand side. As soon as the modal side panel is activated, the shroud appears, and then the side panel slides into the page.
Scroll Behavior
When content is inserted into a side panel 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.
Usage
Max Width
Use and select the appropriate size side panel for the information you are hoping to display.
Alter the width of the side panel to accommodate the information you are inputting into the side sheet.
Title Width
Use short and immediately recognizable terms, ideally a two to three-word maximum length limit.
Avoid including long and overly verbose that do not immediately express the purpose and goal of the side panel's contents.
Description Placement
Delineate and separate your header section from your description, using the header divider as the mark of that separation.
Avoid including your description in the header element of the side panel.
External Link Placement
Focus on using the external link as a place for further information. Placing this in the header provides the indication that this applies to the content of the whole side panel.
Avoid placing the external link within the header alongside a description. This may overwhelm users.
External Link Usage
Use external links to provide an entry point to pages that provide contextual, relevant, and supplementary information that enhances the user’s understanding of the current panel.
Avoid linking to irrelevant or unrelated pages, such as generic dashboards or activity pages that distract from the purpose of the side panel.
Tabs Placement
Place tabs within the header section, directly beneath the panel title. This ensures there is a clear delineation between content located within the body of the Side Panel and the header.
Don’t scatter or misalign tabs within the body of the Side Panel. Avoid inconsistent spacing or poor visual hierarchy that could make it unclear which tab is active/relevant to what.
Tabs Overflow
When there are more tabs than can fit, use the kebab menu as the overflow mechanism.
Avoid overflowing tabs and ensure that all tabs (or a suitable entry point) are immediate visible to the user.
Badges Implementation
Use badges consistently to indicate status, permissions, or attributes in a clear and non-intrusive way.
Avoid placing the status badge immediately next to the Side Panel title.
Related Components