The dynamic side content is a layout component that allows you to display additional content in a way that adapts flexibly to different screen sizes. The side content appears in a container next to or directly below the main content. The width or height of the main content area adapts accordingly.

Dynamic side content

When to Use

Use the dynamic side content to display information that:

• Enriches the main content and helps users perform their tasks
• Only makes sense when displayed next to the main content (side by side)
• Influences the main content (such as a filter for list, settings for chart, or details for map)

Important: Ensure that users have access to all of the key functions and critical information even if they don’t see the side content. It might not be easy for users to access the side content on smaller screens.

Don’t use dynamic side content:

• If you want to display navigation or critical information that prevents users from completing a task when they have no access to the side content.
• If the content doesn’t relate to the main content.

Anatomy

Dynamic side content is a layout container that can contain any type of component, such as lists, tables, form fields, and more.

1. Dynamic side content
2. Main content*

* The main content is not part of the dynamic side content component. It is included here to illustrate how the side content appears in relation to the rest of the page.

Variants

The size and position of the dynamic side content depend on the configuration and the available screen width. The following variants are available:

Size

Default split – 25% or 30% of the total screen width, depending on the resolution.

Equal split – 50% of the total screen width.

Position

You can specify whether the side content is shown on the right or on the left. At certain breakpoints, the side content slides below the main content (see Responsive Behavior).

Left

Right 

Below main content

Behavior and Interaction

Whether the side content is displayed or hidden depends on the current visibility setting and the screen size (see Responsive Behavior). To enable users to display the supplementary content as needed, it is important to provide options for opening and closing the side content.

Default State

By default, the side content is initially visible, but you can opt to hide it.

Opening the Dynamic Side Content

Add a trigger for opening the side content. This is typically a button in the main content area with a meaningful label. We recommend that you always place the trigger for the side content in the same location.

Closing the Dynamic Side Content

Enable users to close the side panel from the side panel header. Since the dynamic side panel doesn’t have a built-in header, we strongly recommend adding a toolbar with a title, a transparent Close button, and a spacer in between.

Responsive Behavior

Screen width > 1440 px

• The ratio of the main content to side content is 3:1 (with a minimum of 320 px each).
• If you define a trigger, the side content can be hidden.

Screen width <= 1440 px and > 1024 px

• The ratio of the main content to side content is 2:1 (with a minimum of 320 px each). If the width of the side content falls below 320 px, it automatically slides under the main content, unless you specify that it should disappear.

Screen width <= 1024 px and > 720 px

• The side content ratio is fixed at 340 px and the remaining width is used for the main content.
• If you opt to move the component below the main content, and screen width is <= 960 px and >720 px, the side content drops below the main content.

Screen width <= 720 px (for example, on a mobile device)

• The side content automatically disappears from the screen, unless you specify that it should stay below the main content. The side content is opened by the trigger you offer in the main content. When the side content is triggered, it replaces the main content. For the triggering action, use a label that indicates the type of content shown in the side panel.

Special case: comparison mode

If you opt to split the screen equally for comparisons (50% each for the main and side content), the responsive behaviour is the same as for the standard view. If the screen width falls below 720 px, the side content disappears and can only be viewed if it’s actively triggered.

Dynamic side content on a mobile device – live example

Related Links