Skip to content
Primer/React
What's new
Design
Interface guidelinesOcticonsPresentationsCommand lineMobileDesktop
Build
CSSReactViewComponents
ContributeAbout
On this page

PageLayout

Alpha
View sourceView storybook
On this page
import {PageLayout} from '@primer/react'

Examples

See storybook for fullscreen examples.

Default

With dividers

With connected dividers

With pane on left

With pane hidden on narrow viewports

With condensed spacing

Without header or footer

With a sticky pane

With a custom sticky header

Props

PageLayout

NameTypeDefaultDescription
containerWidth
| 'full'
| 'medium'
| 'large'
| 'xlarge'
'xlarge'The maximum width of the page container.
padding
| 'none'
| 'condensed'
| 'normal'
'normal'The spacing between the outer edges of the page container and the viewport
columnGap
| 'none'
| 'condensed'
| 'normal'
'normal'
rowGap
| 'none'
| 'condensed'
| 'normal'
'normal'
sx
SystemStyleObject
Style overrides to apply to the component. See also overriding styles.

PageLayout.Header

NameTypeDefaultDescription
padding
| 'none'
| 'condensed'
| 'normal'
'none'The amount of padding inside the header.
divider
| 'none'
| 'line'
| {
    narrow?:
      | 'none'
      | 'line' 
      | 'filled'
    regular?:
      | 'none'
      | 'line'
    wide?:
      | 'none'
      | 'line'
  }
'none'
dividerWhenNarrow Deprecated
| 'inherit'
| 'none'
| 'line'
| 'filled'
'inherit'Use the divider prop with a responsive value instead.
hidden
| boolean
| {
    narrow?: boolean
    regular?: boolean
    wide?: boolean
  }
falseWhether the header is hidden.
sx
SystemStyleObject
Style overrides to apply to the component. See also overriding styles.

PageLayout.Content

NameTypeDefaultDescription
width
| 'full'
| 'medium'
| 'large'
| 'xlarge'
'full'The maximum width of the content region.
padding
| 'none'
| 'condensed'
| 'normal'
'none'The amount of padding inside the content.
hidden
| boolean
| {
    narrow?: boolean
    regular?: boolean
    wide?: boolean
  }
falseWhether the content is hidden.
sx
SystemStyleObject
Style overrides to apply to the component. See also overriding styles.

PageLayout.Pane

NameTypeDefaultDescription
position
| 'start'
| 'end'
| {
    narrow?:
      | 'start'
      | 'end'
    regular?:
      | 'start'
      | 'end'
    wide?:
      | 'start'
      | 'end'
  }
'end'
positionWhenNarrow Deprecated
| 'inherit'
| 'start'
| 'end'
'inherit'Use the position prop with a responsive value instead.
width
| 'small'
| 'medium'
| 'large'
'medium'The width of the pane.
sticky
boolean
falseWhether the pane should stick to the top of the screen while the content scrolls.
stickyTop
number | string
0Use stickyTop 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'
'none'The amount of padding inside the pane.
divider
| 'none'
| 'line'
| {
    narrow?:
      | 'none'
      | 'line' 
      | 'filled'
    regular?:
      | 'none'
      | 'line'
    wide?:
      | 'none'
      | 'line'
  }
'none'
dividerWhenNarrow Deprecated
| 'inherit'
| 'none'
| 'line'
| 'filled'
'inherit'Use the divider prop with a responsive value instead.
hidden
| boolean
| {
    narrow?: boolean
    regular?: boolean
    wide?: boolean
  }
falseWhether the pane is hidden.
sx
SystemStyleObject
Style overrides to apply to the component. See also overriding styles.

PageLayout.Footer

NameTypeDefaultDescription
padding
| 'none'
| 'condensed'
| 'normal'
'none'The amount of padding inside the footer.
divider
| 'none'
| 'line'
| {
    narrow?:
      | 'none'
      | 'line' 
      | 'filled'
    regular?:
      | 'none'
      | 'line'
    wide?:
      | 'none'
      | 'line'
  }
'none'
dividerWhenNarrow Deprecated
| 'inherit'
| 'none'
| 'line'
| 'filled'
'inherit'Use the divider prop with a responsive value instead.
hidden
| boolean
| {
    narrow?: boolean
    regular?: boolean
    wide?: boolean
  }
falseWhether the footer is hidden.
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
3 contributorsbroccolinisoupcolebemismperrotti
Last edited by broccolinisoup on August 18, 2022