SplitPageLayout

SplitPageLayout is a layout component that allows you to create a two-column layout with a main content area and a sidebar.

React

ready

Storybook|Source|Usage

SplitPageLayout is a layout component that allows you to create a two-column layout with a main content area and a sidebar. It is designed to be flexible and responsive, adapting to different screen sizes and content requirements.

React examples

Settings Page

Danger zone

Delete account

Are you sure you don't want to just downgrade your account to a free account? We won't charge your credit card anymore.

<SplitPageLayout>
  <SplitPageLayout.Pane position="start">
    <NavList aria-label="Main navigation">
      <NavList.Item href="#">Profile</NavList.Item>
      <NavList.Item href="#" aria-current="page">
        Account
      </NavList.Item>
      <NavList.Item href="#">Emails</NavList.Item>
      <NavList.Item href="#">Notifications</NavList.Item>
    </NavList>
  </SplitPageLayout.Pane>
  <SplitPageLayout.Content>
    <Heading
      as="h2"
      style={{
        fontSize: '2em',
        fontWeight: 'normal',
        color: 'var(--fgColor-danger,var(--color-danger-fg,#d1242f))',
        marginBottom: '1rem',
      }}
    >
      Danger zone
    </Heading>
    <div
      style={{
        border: '1px solid',
        borderColor: 'var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e))',
        borderRadius: '1rem',
        padding: '1rem',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        gap: '1rem',
      }}
    >
      <div style={{display: 'grid', gap: '1rem'}}>
        <p
          style={{
            fontSize: '1em',
            fontWeight: 'bold',
            color: 'var(--fgColor-danger,var(--color-danger-fg,#d1242f))',
          }}
        >
          Delete account
        </p>
        <p style={{fontSize: '1em', color: 'var(--fgColor-muted,var(--color-fg-muted,#6a737d))'}}>
          Are you sure you don&apos;t want to just downgrade your account to a free account? We won&apos;t charge your
          credit card anymore.
        </p>
      </div>
      <Button variant="danger">Delete account</Button>
    </div>
  </SplitPageLayout.Content>
</SplitPageLayout>

<SplitPageLayout>
  <SplitPageLayout.Pane position="start">
    <NavList aria-label="Main navigation">
      <NavList.Item href="#">Profile</NavList.Item>
      <NavList.Item href="#" aria-current="page">
        Account
      </NavList.Item>
      <NavList.Item href="#">Emails</NavList.Item>
      <NavList.Item href="#">Notifications</NavList.Item>
    </NavList>
  </SplitPageLayout.Pane>
  <SplitPageLayout.Content>
    <Heading
      as="h2"
      style={{
        fontSize: '2em',
        fontWeight: 'normal',
        color: 'var(--fgColor-danger,var(--color-danger-fg,#d1242f))',
        marginBottom: '1rem',
      }}
    >
      Danger zone
    </Heading>
    <div
      style={{
        border: '1px solid',
        borderColor: 'var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e))',
        borderRadius: '1rem',
        padding: '1rem',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        gap: '1rem',
      }}
    >
      <div style={{display: 'grid', gap: '1rem'}}>
        <p
          style={{
            fontSize: '1em',
            fontWeight: 'bold',
            color: 'var(--fgColor-danger,var(--color-danger-fg,#d1242f))',
          }}
        >
          Delete account
        </p>
        <p style={{fontSize: '1em', color: 'var(--fgColor-muted,var(--color-fg-muted,#6a737d))'}}>
          Are you sure you don&apos;t want to just downgrade your account to a free account? We won&apos;t charge your
          credit card anymore.
        </p>
      </div>
      <Button variant="danger">Delete account</Button>
    </div>
  </SplitPageLayout.Content>
</SplitPageLayout>

Props

SplitPageLayout

Name	Default	Description
className		`string`

SplitPageLayout.Header

Name	Default	Description
aria-label		`string` A unique label for the rendered main landmark
aria-labelledby		`string` An id to an element which uniquely labels the rendered main landmark
padding	`'normal'`	`\| 'none' \| 'condensed' \| 'normal'` The amount of padding inside the header.
divider	`'line'`	`\| 'none' \| 'line' \| { narrow?: \| 'none' \| 'line' \| 'filled' regular?: \| 'none' \| 'line' wide?: \| 'none' \| 'line' }`
hidden	`false`	`\| boolean \| { narrow?: boolean regular?: boolean wide?: boolean }` Whether the header is hidden.

SplitPageLayout.Content

Name	Default	Description
aria-label		`string` A unique label for the rendered main landmark
aria-labelledby		`string` An id to an element which uniquely labels the rendered main landmark
as	`'main'`	`React.ElementType` Change the root node to another HTML element or custom component.
width	`'large'`	`\| 'full' \| 'medium' \| 'large' \| 'xlarge'` The maximum width of the content region.
padding	`'normal'`	`\| 'none' \| 'condensed' \| 'normal'` The amount of padding inside the content.
hidden	`false`	`\| boolean \| { narrow?: boolean regular?: boolean wide?: boolean }` Whether the content is hidden.

SplitPageLayout.Pane

Name	Default	Description
aria-label		`string \| undefined` Label for the pane. Required if the pane overflows and doesn't have aria-labelledby.
aria-labelledby		`string \| undefined` Id of an element that acts as a label for the pane. Required if the pane overflows and doesn't have aria-label.
width	`'medium'`	`\| 'small' \| 'medium' \| 'large' \| { min: string max: string default: string }` The width of the pane. If using custom widths, provide an object with keys 'min', 'max' and 'default'.
minWidth	`256`	`number` The minimum width of the pane.
resizable	`false`	`boolean` When true, the pane may be resized by the user. Uses localStorage persistence by default. Note: with default persistence in SSR, the server-rendered width may differ from the stored client width, causing a brief layout shift on hydration. Use `onResizeEnd` with server-aware storage to avoid this.
currentWidth		`number \| undefined` Current/controlled width value in pixels. Required when `onResizeEnd` is provided. Pass `undefined` when the persisted value has not loaded yet. The `width` prop still defines the default used when resetting (e.g., double-click).
onResizeEnd		`(width: number) => void` Callback fired when a resize operation ends (drag release or keyboard key up). When provided, replaces localStorage persistence. Requires `currentWidth`.
widthStorageKey	`'paneWidth'`	`string` localStorage key used to persist the pane width across sessions. Only applies when `resizable` is `true` and no `onResizeEnd` callback is provided.
sticky	`true`	`boolean` Whether the pane should stick to the top of the screen while the content scrolls.
offsetHeader	`0`	`number \| string` Use offsetHeader along with the sticky prop to push the sticky pane down to make room for a sticky header if necessary. Use the type `string` to specify the height with a unit i.e. 5rem; otherwise the type `number` will be taken as px.
padding	`'normal'`	`\| 'none' \| 'condensed' \| 'normal'` The amount of padding inside the pane.
divider	`'line'`	`\| 'none' \| 'line' \| { narrow?: \| 'none' \| 'line' \| 'filled' regular?: \| 'none' \| 'line' wide?: \| 'none' \| 'line' }`
hidden	`false`	`\| boolean \| { narrow?: boolean regular?: boolean wide?: boolean }` Whether the pane is hidden.
position	`start`	`'end' \| 'start' \| {narrow?: 'end' \| 'start', narrow?: 'end' \| 'start', wide?: 'end' \| 'start'}` Which side of the page the pane should be on. Can be changed for different viewport widths.

SplitPageLayout.Sidebar

Name	Default	Description
aria-label		`string \| undefined` A unique label for the sidebar region.
aria-labelledby		`string \| undefined` An id to an element which uniquely labels the sidebar region.
position	`'start'`	`'start' \| 'end'` Position of the sidebar relative to the page layout. The sidebar spans the full height of the layout, adjacent to the header, content, and footer.
width	`'medium'`	`\| 'small' \| 'medium' \| 'large' \| { min: string max: string default: string }` The width of the sidebar. If using custom widths, provide an object with keys 'min', 'max' and 'default'.
minWidth	`256`	`number` Minimum width of the sidebar when resizable.
resizable	`false`	`boolean` When true, the sidebar may be resized by the user. Width is persisted to localStorage by default.
padding	`'normal'`	`\| 'none' \| 'condensed' \| 'normal'` The amount of padding inside the sidebar.
divider	`'line'`	`\| 'none' \| 'line'` Divider style between the sidebar and the rest of the layout.
sticky	`false`	`boolean` Whether the sidebar sticks to the viewport when scrolling. When enabled, the sidebar uses position: sticky with top: 0 and height: 100vh.
responsiveVariant	`'default'`	`\| 'default' \| 'fullscreen'` Controls sidebar behavior at narrow viewport widths (below 768px). 'default' retains its normal inline layout. 'fullscreen' expands to cover the full viewport like a dialog overlay.
hidden	`false`	`\| boolean \| { narrow?: boolean regular?: boolean wide?: boolean }` Whether the sidebar is hidden.

SplitPageLayout.Footer

Name	Default	Description
aria-label		`string` A unique label for the rendered main landmark
aria-labelledby		`string` An id to an element which uniquely labels the rendered main landmark
padding	`'normal'`	`\| 'none' \| 'condensed' \| 'normal'` The amount of padding inside the footer.
divider	`'line'`	`\| 'none' \| 'line' \| { narrow?: \| 'none' \| 'line' \| 'filled' regular?: \| 'none' \| 'line' wide?: \| 'none' \| 'line' }`
hidden	`false`	`\| boolean \| { narrow?: boolean regular?: boolean wide?: boolean }` Whether the footer is hidden.