Split Page Layout

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

React
ready

Splt Page Layout 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.

Props

SplitPageLayout

NameDefaultDescription
sx
SystemStyleObject

SplitPageLayout.Header

NameDefaultDescription
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.

sx
SystemStyleObject

SplitPageLayout.Content

NameDefaultDescription
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

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.

sx
SystemStyleObject

SplitPageLayout.Pane

NameDefaultDescription
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.

widthStorageKey
'paneWidth'
string

Provide a key used by localStorage to persist the size of the pane on the client.

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.

sx
SystemStyleObject

SplitPageLayout.Footer

NameDefaultDescription
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.

sx
SystemStyleObject