PageLayout

PageLayout defines the header, main, pane, and footer areas of a page.

React

readyReviewed for a11y

Rails

readyNot reviewed for a11y

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at enim id lorem tempus egestas a non ipsum. Maecenas imperdiet ante quam, at varius lorem molestie vel. Sed at eros consequat, varius tellus et, auctor felis. Donec pulvinar lacinia urna nec commodo. Phasellus at imperdiet risus. Donec sit amet massa purus. Nunc sem lectus, bibendum a sapien nec, tristique tempus felis. Ut porttitor auctor tellus in imperdiet. Ut blandit tincidunt augue, quis fringilla nunc tincidunt sed. Vestibulum auctor euismod nisi. Nullam tincidunt est in mi tincidunt dictum. Sed consectetur aliquet velit ut ornare.

import React from 'react'
import {Box, PageLayout} from '@primer/react'


function Placeholder({height, children}: {height: number | string; children: React.ReactNode}) {
  return (
    <Box
      sx={{
        width: '100%',
        height,
        display: 'grid',
        placeItems: 'center',
        bg: 'canvas.inset',
        borderRadius: 2,
        border: '1px solid',
        borderColor: 'border.subtle',
      }}
    >
      {children}
    </Box>
  )
}


export default function PaneSticky() {
  return (
    <Box sx={{height: '500px', overflow: 'auto'}}>
      <PageLayout>
        <PageLayout.Header>
          <Placeholder height={64}>Header</Placeholder>
        </PageLayout.Header>
        <PageLayout.Content>
          {Array.from({length: 5}).map((_, i) => {
            return (
              <p key={i}>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at enim id lorem tempus egestas a non
                ipsum. Maecenas imperdiet ante quam, at varius lorem molestie vel. Sed at eros consequat, varius tellus
                et, auctor felis. Donec pulvinar lacinia urna nec commodo. Phasellus at imperdiet risus. Donec sit amet
                massa purus. Nunc sem lectus, bibendum a sapien nec, tristique tempus felis. Ut porttitor auctor tellus
                in imperdiet. Ut blandit tincidunt augue, quis fringilla nunc tincidunt sed. Vestibulum auctor euismod
                nisi. Nullam tincidunt est in mi tincidunt dictum. Sed consectetur aliquet velit ut ornare.
              </p>
            )
          })}
        </PageLayout.Content>
        <PageLayout.Pane
          // position="start"
          // resizable
          // padding="normal"
          // divider="line"
          sticky
        >
          {Array.from({length: 5}).map((_, i) => {
            return (
              <Box key={i} as="p" sx={{margin: 0}}>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at enim id lorem tempus egestas a non
                  ipsum. Maecenas imperdiet ante quam, at varius lorem molestie vel. Sed at eros consequat, varius
                  tellus et, auctor felis. Donec pulvinar lacinia urna nec commodo. Phasellus at imperdiet risus. Donec
                  sit amet massa purus.
                </p>
              </Box>
            )
          })}
        </PageLayout.Pane>
        <PageLayout.Footer>
          <Placeholder height={64}>Footer</Placeholder>
        </PageLayout.Footer>
      </PageLayout>
    </Box>
  )
}

import React from 'react'
import {Box, PageLayout} from '@primer/react'

function Placeholder({height, children}: {height: number | string; children: React.ReactNode}) {
  return (
    <Box
      sx={{
        width: '100%',
        height,
        display: 'grid',
        placeItems: 'center',
        bg: 'canvas.inset',
        borderRadius: 2,
        border: '1px solid',
        borderColor: 'border.subtle',
      }}
    >
      {children}
    </Box>
  )
}

export default function PaneSticky() {
  return (
    <Box sx={{height: '500px', overflow: 'auto'}}>
      <PageLayout>
        <PageLayout.Header>
          <Placeholder height={64}>Header</Placeholder>
        </PageLayout.Header>
        <PageLayout.Content>
          {Array.from({length: 5}).map((_, i) => {
            return (
              <p key={i}>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at enim id lorem tempus egestas a non
                ipsum. Maecenas imperdiet ante quam, at varius lorem molestie vel. Sed at eros consequat, varius tellus
                et, auctor felis. Donec pulvinar lacinia urna nec commodo. Phasellus at imperdiet risus. Donec sit amet
                massa purus. Nunc sem lectus, bibendum a sapien nec, tristique tempus felis. Ut porttitor auctor tellus
                in imperdiet. Ut blandit tincidunt augue, quis fringilla nunc tincidunt sed. Vestibulum auctor euismod
                nisi. Nullam tincidunt est in mi tincidunt dictum. Sed consectetur aliquet velit ut ornare.
              </p>
            )
          })}
        </PageLayout.Content>
        <PageLayout.Pane
          // position="start"
          // resizable
          // padding="normal"
          // divider="line"
          sticky
        >
          {Array.from({length: 5}).map((_, i) => {
            return (
              <Box key={i} as="p" sx={{margin: 0}}>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at enim id lorem tempus egestas a non
                  ipsum. Maecenas imperdiet ante quam, at varius lorem molestie vel. Sed at eros consequat, varius
                  tellus et, auctor felis. Donec pulvinar lacinia urna nec commodo. Phasellus at imperdiet risus. Donec
                  sit amet massa purus.
                </p>
              </Box>
            )
          })}
        </PageLayout.Pane>
        <PageLayout.Footer>
          <Placeholder height={64}>Footer</Placeholder>
        </PageLayout.Footer>
      </PageLayout>
    </Box>
  )
}

Name	Required	Description
containerWidth		`\| 'full' \| 'medium' \| 'large' \| 'xlarge'` The maximum width of the page container.
padding		`\| 'none' \| 'condensed' \| 'normal'` The spacing between the outer edges of the page container and the viewport
columnGap		`\| 'none' \| 'condensed' \| 'normal'`
rowGap		`\| 'none' \| 'condensed' \| 'normal'`
sx		`SystemStyleObject`

Name	Required	Description
aria-label		`string \| undefined` A unique label for the rendered banner landmark
aria-labelledby		`string \| undefined` An id to an element which uniquely labels the rendered banner landmark
padding		`\| 'none' \| 'condensed' \| 'normal'` The amount of padding inside the header.
divider		`\| 'none' \| 'line' \| { narrow?: \| 'none' \| 'line' \| 'filled' regular?: \| 'none' \| 'line' wide?: \| 'none' \| 'line' }`
dividerWhenNarrow Deprecated		`\| 'inherit' \| 'none' \| 'line' \| 'filled'` Use the divider prop with a responsive value instead.
hidden		`\| boolean \| { narrow?: boolean regular?: boolean wide?: boolean }` Whether the header is hidden.
sx		`SystemStyleObject`

PageLayout.Content

Name	Required	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
width		`\| 'full' \| 'medium' \| 'large' \| 'xlarge'` The maximum width of the content region.
padding		`\| 'none' \| 'condensed' \| 'normal'` The amount of padding inside the content.
hidden		`\| boolean \| { narrow?: boolean regular?: boolean wide?: boolean }` Whether the content is hidden.
sx		`SystemStyleObject`

PageLayout.Pane

Name	Required	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		`\| '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		`number` The minimum width of the pane.
resizable		`boolean` When true, the pane may be resized by the user.
widthStorageKey		`string` Provide a key used by localStorage to persist the size of the pane on the client.
sticky		`boolean` Whether the pane should stick to the top of the screen while the content scrolls.
offsetHeader		`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		`\| 'none' \| 'condensed' \| 'normal'` The amount of padding inside the pane.
divider		`\| 'none' \| 'line' \| { narrow?: \| 'none' \| 'line' \| 'filled' regular?: \| 'none' \| 'line' wide?: \| 'none' \| 'line' }`
dividerWhenNarrow Deprecated		`\| 'inherit' \| 'none' \| 'line' \| 'filled'` Use the divider prop with a responsive value instead.
hidden		`\| boolean \| { narrow?: boolean regular?: boolean wide?: boolean }` Whether the pane is hidden.
position		`'end' \| 'start' \| { narrow?: 'end' \| 'start'; regular?: 'end' \| 'start'; wide?: 'end' \| 'start'; }` Which side of the page the pane should be on. Can be changed for different viewport widths.
sx		`SystemStyleObject`
ref		`React.RefObject<HTMLDivElement>`

Name	Required	Description
aria-label		`string \| undefined` A unique label for the rendered contentinfo landmark
aria-labelledby		`string \| undefined` An id to an element which uniquely labels the rendered contentinfo landmark
padding		`\| 'none' \| 'condensed' \| 'normal'` The amount of padding inside the footer.
divider		`\| 'none' \| 'line' \| { narrow?: \| 'none' \| 'line' \| 'filled' regular?: \| 'none' \| 'line' wide?: \| 'none' \| 'line' }`
dividerWhenNarrow Deprecated		`\| 'inherit' \| 'none' \| 'line' \| 'filled'` Use the divider prop with a responsive value instead.
hidden		`\| boolean \| { narrow?: boolean regular?: boolean wide?: boolean }` Whether the footer is hidden.
sx		`SystemStyleObject`

PageLayout

React examples

Default

Dividers between areas

Custom padding between areas

Custom padding around layout

Custom column and row gap

Custom pane width

With a resizable pane

With a sticky pane

More examples in a larger viewport

Props

PageLayout

PageLayout.Header

PageLayout.Content

PageLayout.Pane

PageLayout.Footer