Overview
Side Panels are containers that can be positioned in many places on the screen. Usually they are positioned on the left or right of the screen.
They can be repositioned and resized onscreen to suit users needs. Side Panels can contain various types of content and controls that the user can interact with to complete many types of functions, tasks or workflows in their applications.
Side Panel
Legacy Guideline Available
This guideline pertains to the most recent version of the SAP Design System. Previous iterations of this guideline remain applicable for tools that have not yet adopted the latest design vision.
Legacy Guidelines:
When to use
Use Cases – Side Panel
Recommended
- 1 – 3 Side Panels are required
- Displaying and editing additional information
- Local page navigation
- Application navigation
Not Recommended
- More than 3 Side Panels are required
- For applications with deep and complex tool hierarchies and workflows
- For grouping tools into logical sets
Anatomy
Side Panel
Behaviour
Side Panel
Side Panels can be opened and closed from within the application. For example they can be opened from and Object Page Header or a Page Header.
The Side Panel has a number of behaviours that can be used in your application.
- Double click on the Side Panel Title area to collapse the Side Panel
- Close the Side Panel completely using the 'Close' button on the right of the panel
- Resize the Side Panel by dragging on the edges of the Side Panel
- Reposition the Side Panel on screen by dragging the Side Panel by the Panel Title area
- Page between content that is larger than the current width of the Side Panel
Collapsed State
Side Panels can be opened and closed from within the application. For example they can be opened from and Object Page Header or a Page Header.
A Side Panel can be expanded or collapsed by double clicking on the Panel Title area. The Side Panel can be closed by clicking on the 'Close' button on the right.
Expanded State
Side Panels can be opened and closed from within the application. For example they can be opened from and Object Page Header or a Page Header.
A Side Panel can be expanded or collapsed by double clicking on the Panel Title area. The Side Panel can be closed by clicking on the 'Close' button on the right.
Resizing
Side Panels can be resized by dragging the edge of the Side Panel. A Side Panels content area can also be set to expand its height and width automatically.
By default the height is set to expand to contain the content. Once the full height of the available screen space has been used then a scroll bar becomes visible allowing users to scroll to view the rest of their content.
Top Left Expand Behaviour
When Side Panels are located near the top edge of a screen they expand down from the top edge of the screen.
Side Panels can be set to fit to content width or height or both axes.
Users can also drag the edges to resize the SidePanel to meet their needs.
Top Right Expand Behaviour
When Side Panels are located near the top edge of a screen they expand down from the top edge of the screen.
Side Panels can be set to fit to content width or height or both axes.
Users can also drag the edges to resize the SidePanel to meet their needs.
Bottom Edge Expand Behaviour
When Side Panels are located near a bottom edge of screen then they expand up from the bottom edge of the screen
Pagination Bar
When the Side Panel doesn't show the Sub Panel, the user can utilise the Pagination bar to view the content in the Sub Panel. This is very useful on mobile, tablet and smaller desktop resolutions as is allows users to view Sub Panel content without expanding the Side Panel further.
Side Panel – Sub-Panel
Side Panels can can have additional Sub-Panels which give applications with deep & complex workflows the additional functionality they need for their use case. Sub-Panels can be triggered from the Panel Title via a button interaction or they can be triggered by an interaction with content in the Side-Panel.
Side Panels and Sub-Panels can be resized using the vertical splitter bar in the Side Panel. The overall Side Panel can be resized by pulling the edges of the Side Panel.
Example Sub-Panel use cases
- Providing additional information – A Sub-Panel can be triggered to support a user with additional information about a specific task or workflow. For example supporting a user with technical information about a specific task or workflow they are undertaking for the first time.
- Drag and Drop – A Sub-Panel can be triggered to allow a user to drag and drop items from the Sub-Panel to the main Side Panel; for example adding additional items to a list.
Side Panel & Sub-Panel Interaction – Panel Splitter
Side Panels and Sub-Panels can have horizontal and vertical splitters that can be repositioned to show more content in one specific part of the Side Panel or Sub-Panel. This can be very useful in cases where there are large amounts of content to be display and worked with.
Accessibility
Keyboard Interactions and Tab Order
Expanded – Keyboard Handling
The buttons in the Title Bar can activated by pressing 'Enter' on the keyboard. The horizontal splitter can be moved by using the 'Up' and 'Down' arrow keys on the keyboard when the horizontal splitter is in focus. The Pagination can be activated by using the 'Page Up' and 'Page Down' keys on the keyboard when the Pagination is in focus.
Expanded – Tab Order
The Tab Order for the Side Panel can be seen in the image above. User can move around the Side Panel by using the Tab key on the keyboard, users can move backwards by using Shift+Tab.
Expanded & SubPanel – Keyboard Handling
The buttons in the Title Bar can activated by pressing 'Enter' on the keyboard. The horizontal splitter can be moved by using the 'Up' and 'Down' arrow keys on the keyboard when the horizontal splitter is in focus. The Vertical Splitter can be moved by using the 'Left' and 'Right' arrow keys on the keyboard when the Vertical Splitter is in focus.
Expanded & SubPanel – Tab Order
The Tab Order for the Side Panel can be seen in the image above. User can move around the Side Panel by using the Tab key on the keyboard, users can move backwards by using Shift+Tab.
Keyboard Handling
SidePanel – Focus Initial
On clicking the relevant button the SidePanel is opened. The initial focus is switched to the SidePanel which has been opened. If an additional SidePanel is opened then focus is switched to that SidePanel.
SidePanel – Keyboard Interactions – Single SidePanels
- Switch Initial Focus from Content Area to SidePanel using the keyboard shortcut Alt+Tab.
- Switch Focus from SidePanel back to Content Area using the keyboard shortcut Alt+Shift+Tab.
SidePanel – Keyboard Interactions – Multiple SidePanels
- Switch Initial Focus from Content Area to SidePanel using the keyboard shortcut Alt+Tab.
- Switch Focus between different SidePanels using the keyboard shortcut Alt+Tab
- Switch Focus from SidePanel back to Content Area using the keyboard shortcut Alt+Shift+Tab.
Responsiveness
Responsive Behaviour – Desktop
The maximum number of Side Panels for use on Desktop is 3 more that 3 Side Panels even on an XXXL Screen size is going to interfere with the completion of tasks for users and increase potential for confusion. 1 – 2 Side Panels should cater for most users needs. If your users have deep and complex workflows then using the Side Panels with a toolbar is recommended. You may also use the Sub-Panel to allow users to complete deep and complex tasks.
Responsive Behaviour – Tablet
The maximum number of Side Panels recommended for use on Tablet is 2. More than 2 Side Panels would cover too much application content on screen to be useful.
Side Panels Layout Option 01
Two Side Panels one aligned to the top left, one aligned to the top right of the application canvas / content area.
Side Panels Layout Option 02
Two Side Panels one left, one right. The left most aligned to the top of the application canvas / content area and the right most aligned to the bottom of the application canvas / content area.
Side Panels Layout Option 03
A single Side Panel aligned to the bottom of the screen. This can be useful for comparing two sets of tabular data.
Side Panels Layout Option 04
One Side Panel aligned to the top left of the screen and one Side Panel aligned to the bottom of the screen.
Side Panels Layout Option 05
One Side Panel aligned to the top right of the screen and one Side Panel aligned to the bottom of the screen.
Responsive Behaviour – Mobile
For both the Native and Embedded Mobile experience the user can slide the Side Panel up from the bottom of the screen; they can scroll within the Side Panel to view more content or if they wish they can expand the Side Panel to completely cover the content.
Responsive Mobile Native
When the Side Panel is active on a Mobile device it floats over the content and can be expanded and collapsed to show or hide content. Our users can show the Sub-Panel content by clicking on the icon in the Title bar or by swiping right when the panel is expanded; our users can navigate back to the the top level by clicking on the back arrow in the title bar or by swiping left when the panel is expanded.
Responsive Mobile Embedded
When the Side Panel is active on a Mobile device it floats over the content and can be expanded and collapsed to show or hide content. Our users can show the Sub-Panel content by clicking on the icon in the Title bar or by swiping right when the panel is expanded; our users can navigate back to the the top level by clicking on the back arrow in the title bar or by swiping left when the panel is expanded.
Resources
Figma Design Files and Prototypes
Figma Design File – Side Panel
Figma Prototype – Side Panel Floating
Visual Design Specifications – Draft
Side Panel Visual Design Specifications
Leave Feedback
We want to make our toolkit better. If you're interested in providing feedback, please use the commenting feature in the Figma file link in the button below.