SplitPageLayout

Draft

Provides structure for a split page layout, including independent scrolling for the pane and content regions. Useful for responsive list/detail patterns, when an item in the pane updates the page content on selection.

On this page

Not implemented yet

Examples

Default

<SplitPageLayout>
  <SplitPageLayout.Header>
    <Placeholder label="Header" height={64} />
  </SplitPageLayout.Header>
  <SplitPageLayout.Pane>
    <Placeholder label="Pane" height={120} />
  </SplitPageLayout.Pane>
  <SplitPageLayout.Content>
    <Placeholder label="Content" height={240} />
  </SplitPageLayout.Content>
  <SplitPageLayout.Footer>
    <Placeholder label="Footer" height={64} />
  </SplitPageLayout.Footer>
</SplitPageLayout>

With pane hidden on narrow viewports

<SplitPageLayout>
  <SplitPageLayout.Header>
    <Placeholder label="Header" height={64} />
  </SplitPageLayout.Header>
  <SplitPageLayout.Pane hidden={{narrow: true}}>
    <Placeholder label="Pane" height={120} />
  </SplitPageLayout.Pane>
  <SplitPageLayout.Content>
    <Placeholder label="Content" height={240} />
  </SplitPageLayout.Content>
  <SplitPageLayout.Footer>
    <Placeholder label="Footer" height={64} />
  </SplitPageLayout.Footer>
</SplitPageLayout>

With content hidden on narrow viewports

<SplitPageLayout>
  <SplitPageLayout.Header>
    <Placeholder label="Header" height={64} />
  </SplitPageLayout.Header>
  <SplitPageLayout.Pane>
    <Placeholder label="Pane" height={120} />
  </SplitPageLayout.Pane>
  <SplitPageLayout.Content hidden={{narrow: true}}>
    <Placeholder label="Content" height={240} />
  </SplitPageLayout.Content>
  <SplitPageLayout.Footer>
    <Placeholder label="Footer" height={64} />
  </SplitPageLayout.Footer>
</SplitPageLayout>

Without dividers

<SplitPageLayout>
  <SplitPageLayout.Header divider="none">
    <Placeholder label="Header" height={64} />
  </SplitPageLayout.Header>
  <SplitPageLayout.Pane divider="none">
    <Placeholder label="Pane" height={120} />
  </SplitPageLayout.Pane>
  <SplitPageLayout.Content>
    <Placeholder label="Content" height={240} />
  </SplitPageLayout.Content>
  <SplitPageLayout.Footer divider="none">
    <Placeholder label="Footer" height={64} />
  </SplitPageLayout.Footer>
</SplitPageLayout>

With pane on right

<SplitPageLayout>
  <SplitPageLayout.Header>
    <Placeholder label="Header" height={64} />
  </SplitPageLayout.Header>
  <SplitPageLayout.Content>
    <Placeholder label="Content" height={240} />
  </SplitPageLayout.Content>
  <SplitPageLayout.Pane position="end">
    <Placeholder label="Pane" height={120} />
  </SplitPageLayout.Pane>
  <SplitPageLayout.Footer>
    <Placeholder label="Footer" height={64} />
  </SplitPageLayout.Footer>
</SplitPageLayout>

Without padding

<SplitPageLayout>
  <SplitPageLayout.Header padding="none">
    <Placeholder label="Header" height={64} />
  </SplitPageLayout.Header>
  <SplitPageLayout.Pane padding="none">
    <Placeholder label="Pane" height={120} />
  </SplitPageLayout.Pane>
  <SplitPageLayout.Content padding="none">
    <Placeholder label="Content" height={240} />
  </SplitPageLayout.Content>
  <SplitPageLayout.Footer padding="none">
    <Placeholder label="Footer" height={64} />
  </SplitPageLayout.Footer>
</SplitPageLayout>

Without header or footer

<SplitPageLayout>
  <SplitPageLayout.Pane>
    <Placeholder label="Pane" height={120} />
  </SplitPageLayout.Pane>
  <SplitPageLayout.Content>
    <Placeholder label="Content" height={240} />
  </SplitPageLayout.Content>
</SplitPageLayout>

With non-sticky pane

<SplitPageLayout>
  <SplitPageLayout.Header>
    <Placeholder label="Header" height={64} />
  </SplitPageLayout.Header>
  <SplitPageLayout.Pane sticky={false}>
    <Placeholder label="Pane" height={120} />
  </SplitPageLayout.Pane>
  <SplitPageLayout.Content>
    <Placeholder label="Content" height={240} />
  </SplitPageLayout.Content>
  <SplitPageLayout.Footer>
    <Placeholder label="Footer" height={64} />
  </SplitPageLayout.Footer>
</SplitPageLayout>

Props

SplitPageLayout

Name	Type	Default	Description
sx	SystemStyleObject		Style overrides to apply to the component. See also overriding styles.

SplitPageLayout.Header

Name	Type	Default	Description
divider	ResponsiveValue< 'none' \| 'line', 'none' \| 'line' \| 'filled' >	'line'
hidden	ResponsiveValue<boolean>	false	Whether the header is hidden.
padding	\| 'none' \| 'normal' \| 'condensed'	'normal'
sx	SystemStyleObject		Style overrides to apply to the component. See also overriding styles.

SplitPageLayout.Content

Name	Type	Default	Description
width	\| 'full' \| 'medium' \| 'large' \| 'xlarge'	'xlarge'	The maximum width of the content region.
hidden	ResponsiveValue<boolean>	false	Whether the content is hidden.
padding	\| 'none' \| 'normal' \| 'condensed'	'normal'
sx	SystemStyleObject		Style overrides to apply to the component. See also overriding styles.

SplitPageLayout.Pane

Name	Type	Default	Description
position	ResponsiveValue< 'start' \| 'end' >	'start'
width	\| 'small' \| 'medium' \| 'large'	'medium'	The width of the pane.
sticky	boolean	true	Whether the pane is sticky.
divider	ResponsiveValue< 'none' \| 'line', 'none' \| 'line' \| 'filled' >	'line'
hidden	ResponsiveValue<boolean>	false	Whether the pane is hidden.
padding	\| 'none' \| 'normal' \| 'condensed'	'normal'
sx	SystemStyleObject		Style overrides to apply to the component. See also overriding styles.

SplitPageLayout.Footer

Name	Type	Default	Description
divider	ResponsiveValue< 'none' \| 'line', 'none' \| 'line' \| 'filled' >	'line'
hidden	ResponsiveValue<boolean>	false	Whether the footer is hidden.
padding	\| 'none' \| 'normal' \| 'condensed'	'normal'
sx	SystemStyleObject		Style overrides to apply to the component. See also overriding styles.

Status

Alpha

Component props are documented on primer.style/react.
Component does not have any unnecessary third-party dependencies.
Component can adapt to different themes.
Component can adapt to different screen sizes.
Component has 100% test coverage.

Beta

Component is used in a production application.
Common usage examples are documented on primer.style/react.
Common usage examples are documented in storybook stories.
Component has been reviewed by a systems designer and any resulting issues have been addressed.
Component has been manually reviewed by the accessibility team and any resulting issues have been addressed.

Stable

Component API has been stable with no breaking changes for at least one month.
Feedback on API usability has been sought from developers using the component and any resulting issues have been addressed.
Component has corresponding design guidelines documented in the interface guidelines.
Component has corresponding Figma component in the Primer Web library.

Edit this page on GitHub

1 contributor

Last edited by colebemis on August 16, 2022