React

Page

The page component is used to create the basic structure of a page with either vertical or horizontal navigation. Related design guidelines: Navigation system

ExamplesPropsCSS Variables

Examples

Vertical page layout

Navigation
Section with darker background
Section with dark background
Section with light background
Copied to clipboard

Horizontal page layout

Section with darker background
Section with dark background
Section with light background
Copied to clipboard

Main Section Padding Modifiers

Navigation
Section with default padding
Section with no padding
Section with no padding on mobile only
Copied to clipboard

Props

Page Props

The Page component accepts the following props.

NameTypeRequiredDefaultDescription
childrennodenullContent rendered inside the main section of the page layout (e.g. <PageSection />)
classNamestring''Additional classes added to the page layout
headernodenullHeader component (e.g. <PageHeader />)
sidebarnodenullSidebar component for a side nav (e.g. <PageSidebar />)
skipToContentnodenullSkip to content component for the page
breadcrumbnodenullBreadcrumb component for the page
isManagedSidebarboolfalseIf true, manages the sidebar open/close state and there is no need to pass the isNavOpen boolean into the sidebar component or add a callback onNavToggle function into the PageHeader component
onPageResizefuncnullCan add callback to be notified when resize occurs, for example to set the sidebar isNav prop to false for a width < 768px Returns object { mobileView: boolean, windowSize: number }
anyAdditional props are spread to the container <div>

PageHeader Props

The PageHeader component accepts the following props.

NameTypeRequiredDefaultDescription
classNamestring''Additional classes added to the page header
logonodenullComponent to render the logo/brand (e.g. <Brand />)
logoPropsobjectnullAdditional props passed to the logo anchor container
toolbarnodenullComponent to render the toolbar (e.g. <Toolbar />)
avatarnodenullComponent to render the avatar (e.g. <Avatar />
topNavnodenullComponent to render navigation within the header (e.g. <Nav />
showNavToggleboolfalseTrue to show the nav toggle button (toggles side nav)
onNavTogglefunc() => undefinedCallback function to handle the side nav toggle button, managed by the Page component if the Page isManagedSidebar prop is set to true
isNavOpenbooltrueTrue if the side nav is shown
aria-labelstring'Global navigation'Callback function to handle the side nav toggle button
anyAdditional props are spread to the container <header>

PageSection Props

The PageSection component accepts the following props.

NameTypeRequiredDefaultDescription
childrennodenullContent rendered inside the section
classNamestring''Additional classes added to the section
variantenum'default'Section background color variant
noPaddingboolfalseModifies a main page section to have no padding
noPaddingMobileboolfalseModifies a main page section to have no padding on mobile
anyAdditional props are spread to the container <section>

PageSidebar Props

The PageSidebar component accepts the following props.

NameTypeRequiredDefaultDescription
classNamestring''Additional classes added to the page sidebar
navnodenullComponent to render the side navigation (e.g. <Nav />
isNavOpenbooltrueProgrammatically manage if the side nav is shown, if isManagedSidebar is set to true in the Page component, this prop is managed
anyAdditional props are spread to the container <aside>

CSS Variables

--pf-c-page--BackgroundColorc_page_BackgroundColor#151515
--pf-c-page__header--MinHeightc_page__header_MinHeight4.75rem
--pf-c-page__header--ZIndexc_page__header_ZIndex300
--pf-c-page__header-brand--PaddingLeftc_page__header_brand_PaddingLeft1rem
--pf-c-page__header-brand-link--c-brand--MaxHeightc_page__header_brand_link_c_brand_MaxHeight3.75rem
--pf-c-page__header-brand--md--PaddingLeftc_page__header_brand_md_PaddingLeft2rem
--pf-c-page__header-brand--md--PaddingRightc_page__header_brand_md_PaddingRight2rem
--pf-c-page__header-nav--BackgroundColorc_page__header_nav_BackgroundColorrgba(3,3,3,.62)
--pf-c-page__header-nav--PaddingLeftc_page__header_nav_PaddingLeft1rem
--pf-c-page__header-nav--lg--BackgroundColorc_page__header_nav_lg_BackgroundColortransparent
--pf-c-page__header-nav--lg--MarginLeftc_page__header_nav_lg_MarginLeft2rem
--pf-c-page__header-nav--lg--MarginRightc_page__header_nav_lg_MarginRight2rem
--pf-c-page__header-nav--lg--PaddingLeftc_page__header_nav_lg_PaddingLeft0
--pf-c-page__header-nav--md--PaddingLeftc_page__header_nav_md_PaddingLeft2rem
--pf-c-page__header-sidebar-toggle__c-button--FontSizec_page__header_sidebar_toggle__c_button_FontSize1.5rem
--pf-c-page__header-sidebar-toggle__c-button--MarginLeftc_page__header_sidebar_toggle__c_button_MarginLeftcalc(0.25rem * -1)
--pf-c-page__header-sidebar-toggle__c-button--MarginRightc_page__header_sidebar_toggle__c_button_MarginRight1rem
--pf-c-page__header-sidebar-toggle__c-button--PaddingBottomc_page__header_sidebar_toggle__c_button_PaddingBottom0.5rem
--pf-c-page__header-sidebar-toggle__c-button--PaddingLeftc_page__header_sidebar_toggle__c_button_PaddingLeft0.5rem
--pf-c-page__header-sidebar-toggle__c-button--PaddingRightc_page__header_sidebar_toggle__c_button_PaddingRight0.5rem
--pf-c-page__header-sidebar-toggle__c-button--PaddingTopc_page__header_sidebar_toggle__c_button_PaddingTop0.5rem
--pf-c-page__header-sidebar-toggle__c-button--md--MarginLeftc_page__header_sidebar_toggle__c_button_md_MarginLeftcalc(0.5rem * -1)
--pf-c-page__header-tools--MarginBottomc_page__header_tools_MarginBottom0.5rem
--pf-c-page__header-tools--MarginRightc_page__header_tools_MarginRight1rem
--pf-c-page__header-tools--MarginTopc_page__header_tools_MarginTop0.5rem
--pf-c-page__header-tools--c-avatar--MarginLeftc_page__header_tools_c_avatar_MarginLeft1rem
--pf-c-page__header-tools-group--MarginLeftc_page__header_tools_group_MarginLeft2rem
--pf-c-page__header-tools--md--MarginRightc_page__header_tools_md_MarginRight2rem
--pf-c-page__main--ZIndexc_page__main_ZIndex100
--pf-c-page__main-nav--BackgroundColorc_page__main_nav_BackgroundColor#fff
--pf-c-page__main-nav--PaddingBottomc_page__main_nav_PaddingBottom1rem
--pf-c-page__main-nav--PaddingLeftc_page__main_nav_PaddingLeft1rem
--pf-c-page__main-nav--PaddingRightc_page__main_nav_PaddingRight1rem
--pf-c-page__main-nav--PaddingTopc_page__main_nav_PaddingTop1rem
--pf-c-page__main-nav--c-nav__scroll-button--nth-of-type-1--Leftc_page__main_nav_c_nav__scroll_button_nth_of_type_1_Leftcalc(-1 * (2rem - 0.25rem))
--pf-c-page__main-nav--c-nav__scroll-button--nth-of-type-1--md--Leftc_page__main_nav_c_nav__scroll_button_nth_of_type_1_md_Leftcalc(-1 * (1rem - 0.25rem))
--pf-c-page__main-nav--c-nav__scroll-button--nth-of-type-2--Rightc_page__main_nav_c_nav__scroll_button_nth_of_type_2_Rightcalc(-1 * (2rem - 0.25rem))
--pf-c-page__main-nav--c-nav__scroll-button--nth-of-type-2--md--Rightc_page__main_nav_c_nav__scroll_button_nth_of_type_2_md_Rightcalc(-1 * (1rem - 0.25rem))
--pf-c-page__main-nav--md--PaddingLeftc_page__main_nav_md_PaddingLeft2rem
--pf-c-page__main-nav--md--PaddingRightc_page__main_nav_md_PaddingRight2rem
--pf-c-page__main-section--BackgroundColorc_page__main_section_BackgroundColorrgba(3,3,3,.32)
--pf-c-page__main-section--PaddingBottomc_page__main_section_PaddingBottom1rem
--pf-c-page__main-section--PaddingLeftc_page__main_section_PaddingLeft1rem
--pf-c-page__main-section--PaddingRightc_page__main_section_PaddingRight1rem
--pf-c-page__main-section--PaddingTopc_page__main_section_PaddingTop1rem
--pf-c-page__main-section--m-dark-100--BackgroundColorc_page__main_section_m_dark_100_BackgroundColorrgba(3,3,3,.62)
--pf-c-page__main-section--m-dark-200--BackgroundColorc_page__main_section_m_dark_200_BackgroundColorrgba(3,3,3,.32)
--pf-c-page__main-section--m-light--BackgroundColorc_page__main_section_m_light_BackgroundColor#fff
--pf-c-page__main-section--m-no-padding-mobile--md--PaddingBottomc_page__main_section_m_no_padding_mobile_md_PaddingBottom0
--pf-c-page__main-section--m-no-padding-mobile--md--PaddingLeftc_page__main_section_m_no_padding_mobile_md_PaddingLeft0
--pf-c-page__main-section--m-no-padding-mobile--md--PaddingRightc_page__main_section_m_no_padding_mobile_md_PaddingRight0
--pf-c-page__main-section--m-no-padding-mobile--md--PaddingTopc_page__main_section_m_no_padding_mobile_md_PaddingTop0
--pf-c-page__main-section--md--PaddingBottomc_page__main_section_md_PaddingBottom2rem
--pf-c-page__main-section--md--PaddingLeftc_page__main_section_md_PaddingLeft2rem
--pf-c-page__main-section--md--PaddingRightc_page__main_section_md_PaddingRight2rem
--pf-c-page__main-section--md--PaddingTopc_page__main_section_md_PaddingTop2rem
--pf-c-page__sidebar--BackgroundColorc_page__sidebar_BackgroundColor#fff
--pf-c-page__sidebar--BoxShadowc_page__sidebar_BoxShadow0.75rem 0 0.625rem -0.25rem rgba(3,3,3,.07)
--pf-c-page__sidebar--Transformc_page__sidebar_Transformtranslate3d(0,0,0)
--pf-c-page__sidebar--Transitionc_page__sidebar_Transitionall 250ms cubic-bezier(0.42,0,0.58,1)
--pf-c-page__sidebar--Widthc_page__sidebar_Width80%
--pf-c-page__sidebar--ZIndexc_page__sidebar_ZIndex200
--pf-c-page__sidebar-body--PaddingBottomc_page__sidebar_body_PaddingBottom1rem
--pf-c-page__sidebar-body--PaddingTopc_page__sidebar_body_PaddingTop1rem
--pf-c-page__sidebar--m-expanded--Transformc_page__sidebar_m_expanded_Transformtranslate3d(0,0,0)
--pf-c-page__sidebar--md--Transformc_page__sidebar_md_Transformtranslate3d(0,0,0)
--pf-c-page__sidebar--md--Widthc_page__sidebar_md_Width18.125rem