Parent-child layout

Available since
@salt-ds/core@1.25.0

ParentChildLayout displays a larger child content area and a smaller parent content area. The parent area influences the content in the child area, such as navigation for a preferences dialog.

Note: This tab list includes overflow; tab positions may be inaccurate or change when a tab is selected
Density
Mode

A parent-child layout displays the parent component to the left and child component to the right.

The parent-child layout component changes to a collapsed view once it approaches a specified breakpoint. Only one of the regions remains visible and fills the width of the parent. The breakpoint and visible view can customized using the collapsedAtBreakpoint and visibleView props.

You can customize or disable the animations using the prefers-reduced-motion CSS media feature.

This is an example of a preferences dialog using the parent-child layout.