Overview
The Responsive Splitter Layout structures complex application content into defined areas. The areas are resizable manually and programmatically by external triggers such as buttons or menu entries. The split panes and their parent containers are parts of the splitter and have properties that can be changed to meet the application’s needs.
Splitter - Page - Desktop
An example of using a responsive splitter to structure a page into resizable areas.
Splitter - Side Panel - Desktop
An example of using a responsive splitter to structure a side panel content.
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
Recommended
- Use to display several resizable areas side by side (ex. comparison scenarios).
- Use to enable working simultaneously on different items at the same time (ex. editing properties).
- Keep the number of resizable areas low (between 2 and 5).
Not Recommended
- Avoid using it to display hierarchical content. Use a Flexible Column Layout instead.
- Avoid using it if the Splitter Pane content is too complex. Use a Flexible Column Layout instead.
- Avoid using it together with Side Panels. Use the Split Panes as a panel instead.
- Avoid using it if the focus must be on one content area at a time. Use Page Tabs instead.
- Avoid using it if content and UI elements can be separated by white space alone.
See also:
Anatomy
As a layout, the Responsive Splitter has no visual elements apart from the Grip: the component that allows resizing, and the Pagonation Bar: which allows switching between panes when responsiveness kicks in.
- Set the pane that will never be moved off-canvas.
- Decide the widths at which panes will be moved off-canvas (the higher the width, the earlier it moves).
Container Nesting
Exploded view of nesting containers and panes.
Pane Container (Required)
Every Responsive Splitter has a Pane Container that hosts the Split Panes and other Pane Containers. Pane Containers define the orientation of the split.
See also:
Split Pane (Required)
Split Panes refer to the segments of a split layout. As containers, split panes may contain any content or components. Split Panes interact with one another and respond contextually to one another.
3 Split Panes condensing to 2 Split Panes and a Pagination Bar
Split Panes move off-canvas when the responsive splitter reaches a pre-defined width. When the split pane moves off-canvas, it is reachable via a Pagination Bar at the bottom of the following pane that will go off-canvas. If needed, the panes support an option to completely hide from the screen and not be reachable via the pagination.
Resizing
When resizing a pane, the neighboring pane will also be affected. As one pane gets larger, the neighboring panes can get smaller. By default, all panes are automatically sized and they shrink and grow proportionally with the Responsive Splitter. Proportional resizing can be limited by setting a width for the pane.
Resizing a Split Pane can affect the size of other panes
- Use min width to define the minimum size of the pane. Recommended 320px.
- Use max-width to define the maximum size of the pane.
- Use both min and max widths to define the range in which the pane resizes.
- Use the width to make the pane non-resizable.
- Add a 0.5rem (8px) border-radius to the panes for a nice look and feel.
Min-Width
The pane cannot get smaller than the assigned min-width.
Max-Width
The pane cannot get bigger than the assigned max-width.
Width
The pane cannot change size. The Grip element is not shown.
Opening and Closing
Additional panes can be created and removed programmatically via external triggers (ex. Button in a Toolbar, Contextual Menu, etc.). These interactions vary by application and are defined by the application team.
- Don't use resizing interactions to open and close panes.
Background Design
The content container components must support their content. Therefore a standardized Background Design property is available to all Split Pane.
Split Pane background design variations
See also:
Grip (Automatic)
Grips are horizontal or vertical dividers that may be moved around to make a Split Pane larger or smaller. Grips may be interacted with anywhere along the component itself. In the middle of the Grip, a big handle makes the interaction easier. Grip orientation is determined automatically based on the orientation of the Pane Container.
Splitter Visual States
Background Design
Grips appear in various scenarios, so the option to provide background to increase visibility is available.
Splitter Background Design
Pagination Bar (Automatic)
The Pagination Bar is automatically displayed at the bottom of a Split Pane and offers access to the panes pushed into off-canvas mode. The pagination bar contains a Nested Button for each pane moved off-canvas. It is the lowermost bar in the pane displayed (ex., below the footer).
Pagination Bar
Keyboard Handling
Keyboard Handling
Screen Reader
Screen Reader
Responsiveness
The Responsive Splitter layout adapts to different viewports and device types. The splitter arranges the defined Split Panes side by side on large devices, while it automatically structures the panes differently on smaller viewport devices.
Responsiveness with default pane
The image above shows a Responsive Splitter with four defined panes.
- Pane A is configured to move off-canvas when the width is below 600px.
- Pane B is set as the default pane which means that it will never move off-canvas.
- Pane C is configured to move off-canvas when the width is below 600px.
- Pane D has a fixed width so that the Grip is not displayed.
On Desktop the all panes are shown. On tablet too. When the tablet is turned into a portrait position the viewport becomes less than 800 pixels and pane D is moved off-canvas as it takes the default value. The Pagination Bar appears in the previous pane in the sequence (Pane C). When the splitter is displayed on a phone the size becomes less than 600 pixels and both Pane A and Pane C are moved off-canvas. This leaves Pane B (the default one) visible and the Pagination Bar is moved to the bottom of that pane.
Each pane can be configured individually to move off-canvas and appear as a page in the Pagination Bar (see above) based on the width of the splitter. Additionally, panes can be configured not to be displayed in the pagination when moved off-canvas. A pane can also be configured never to move off-canvas.
Tablet
Splitter - Tablet - Page Landscape
Splitter - Tablet - Side Panel Landscape
Splitter - Tablet - Page Portrait
Splitter - Tablet - Side Panel Portrait
Phone
Splitter - Page - Phone
Splitter - Side Panel - Phone
Best Practices
Define Pane Layout
It is essential to plan the Responsive Splitter Layout to have a main pane and supporting panes that feed into the main one. Users will benefit from understanding they are dealing with multiple resizable segments from the start and feel more inclined to resize split panes as desired.
A typical Responsive Splitter layout definition
- Label the panes accordingly. Use the title typography to separate the main (H3) and supporting (H5) panes.
- Show as many panes as possible and leave moving off-canvas to responsiveness.
- Show the panes in their most beneficial size.
- Consider adding an action to bring the panes to their default (optimized) sizes.
Define Pane Size
Consider the content for each pane and how people will interact with it. Make sure the pane provides enough space to make the content easy to interact with.
Respect pane size when switching between off-canvas panes
- Consider adding minimum and maximum widths to a pane to limit resizing.
- Consider adding a fixed width to avoid resizing.
- Respect the size of the pane when bringing it off-canvas via the Pagination Bar.
Use Responsive Controls
When resizing panes, ensure their inner contents can be resized responsively. This is especially important if the component being used are custom design elements from outside of the SAP UI frameworks.
Responsive content within Split Panes
- Use standard responsive components.
- Consider defining pane size breakpoints to make content render optimally.
Use Toolbars Responsibly
It is common that pane content differs in size, complexity, and function. As a result, each pane may be subject to different pane actions. This is why it is important to consider placing the pane actions inside the pane as opposed to an external container.
Pane actions placed as part of the titles
- Place pane actions inside of the pane.
- Place emphasized actions only in the main pane.
- Place the actions alongside the title. Consider using the title Bar.
Avoid Horizontal Scrolling
Avoid horizontal scrolling if possible. In small content containers like Split Panes, it is essential to eliminate that type of interaction and use responsive components and minimum widths. If the content complexity of a pane grows too much consider using another type of container for that content (ex. Dialog).
Resources
Design
WebComponents - Sample (component not available)
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.