The dynamic variant of the Side Panel, pushes the content of a given page. This type of Side Panel should be used for secondary user flows modify the given page and it’s content in some manner.
Sizes
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 side panel is activated, the contents of the page are compressed to accommodate the side panel coming in.
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 while the header and the footer elements remain fixed.
Usage
General Placement
Where possible the dynamic side panel should be positioned just below the top navigation bar. When active, the side panel only condenses the contents of the page and does not affect the placement of the overall navigation
Avoid placing the side panel alongside the navigation.
Max Width
Select the appropriate type of side panel for the information you are hoping to display. When deciding which type of side panel ensure that takes up maximum 40% of the page at any given point.
Avoid altering the width of the side panel to accommodate the information you are inputting into the side sheet
Title Sizes
The "medium" title size is our default side panel title size. As such this should be used for the majority of use cases.
Our "large" title size variant of the side panel is reserved for high priority content such as navigation based panels. Avoid using this title size for secondary/tertiary based content such as filtering.
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 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.
Tab 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.
Tab 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.
Badge 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