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

Copied to clipboard

Horizontal page layout

Copied to clipboard

Main Section Padding Modifiers

Copied to clipboard

Main section fill/no-fill modifiers

Copied to clipboard

Props

Page Props

The Page component accepts the following props.

NameTypeRequiredDefaultDescription
childrenReact.ReactNodenull as React.ReactNodeContent rendered inside the main section of the page layout (e.g. <PageSection />)
classNamestring''Additional classes added to the page layout
headerReact.ReactNodenull as React.ReactNodeHeader component (e.g. <PageHeader />)
sidebarReact.ReactNodenull as React.ReactNodeSidebar component for a side nav (e.g. <PageSidebar />)
skipToContentReact.ReactElementnull as React.ReactElementSkip to content component for the page
isManagedSidebarbooleanfalseIf 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
onPageResize(object: any) => void():void => nullCan 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 }
breadcrumbReact.ReactNodenull as React.ReactNodeBreadcrumb component for the page

PageHeader Props

The PageHeader component accepts the following props.

NameTypeRequiredDefaultDescription
classNamestring''Additional classes added to the page header
logoReact.ReactNodenull as React.ReactNodeComponent to render the logo/brand (e.g. <Brand />)
logoPropsobjectnull as objectAdditional props passed to the logo anchor container
logoComponentReact.ReactNode'a'Component to use to wrap the passed <logo>
toolbarReact.ReactNodenull as React.ReactNodeComponent to render the toolbar (e.g. <Toolbar />)
avatarReact.ReactNodenull as React.ReactNodeComponent to render the avatar (e.g. <Avatar />
topNavReact.ReactNodenull as React.ReactNodeComponent to render navigation within the header (e.g. <Nav />
showNavTogglebooleanfalseTrue to show the nav toggle button (toggles side nav)
isNavOpenbooleantrueTrue if the side nav is shown
isManagedSidebarbooleanIf 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
onNavToggle() => void() => undefined as anyCallback function to handle the side nav toggle button, managed by the Page component if the Page isManagedSidebar prop is set to true
aria-labelstring'Global navigation'Aria Label for the nav toggle button

PageSection Props

The PageSection component accepts the following props.

NameTypeRequiredDefaultDescription
childrenReact.ReactNodeContent rendered inside the section
classNamestring''Additional classes added to the section
variant'default' | 'light' | 'dark' | 'darker''default'Section background color variant
type'default' | 'nav''default'Section type variant
isFilledbooleanEnables the page section to fill the available vertical space
noPaddingbooleanfalseModifies a main page section to have no padding
noPaddingMobilebooleanfalseModifies a main page section to have no padding on mobile

PageSidebar Props

The PageSidebar component accepts the following props.

NameTypeRequiredDefaultDescription
className''
isNavOpentrue

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_PaddingLeft1.5rem
--pf-c-page__header-brand--md--PaddingRightc_page__header_brand_md_PaddingRight2rem
--pf-c-page__header-nav--BackgroundColorc_page__header_nav_BackgroundColor#242424
--pf-c-page__header-nav--PaddingLeftc_page__header_nav_PaddingLeft1rem
--pf-c-page__header-nav--c-nav__scroll-button--lg--BackgroundColorc_page__header_nav_c_nav__scroll_button_lg_BackgroundColor#242424
--pf-c-page__header-nav--c-nav__scroll-button--lg--Topc_page__header_nav_c_nav__scroll_button_lg_Top0
--pf-c-page__header-nav--c-nav__scroll-button--nth-of-type-1--Leftc_page__header_nav_c_nav__scroll_button_nth_of_type_1_Leftcalc(-1 * (1rem - 0.25rem))
--pf-c-page__header-nav--c-nav__scroll-button--nth-of-type-1--lg--Leftc_page__header_nav_c_nav__scroll_button_nth_of_type_1_lg_Left0
--pf-c-page__header-nav--c-nav__scroll-button--nth-of-type-1--md--Leftc_page__header_nav_c_nav__scroll_button_nth_of_type_1_md_Leftcalc(-1 * (1rem - 0.25rem))
--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_PaddingLeft1.5rem
--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_MarginRight1.5rem
--pf-c-page__main--ZIndexc_page__main_ZIndex100
--pf-c-page__main-breadcrumb--BackgroundColorc_page__main_breadcrumb_BackgroundColor#fff
--pf-c-page__main-breadcrumb--PaddingBottomc_page__main_breadcrumb_PaddingBottom0
--pf-c-page__main-breadcrumb--PaddingLeftc_page__main_breadcrumb_PaddingLeft1rem
--pf-c-page__main-breadcrumb--PaddingRightc_page__main_breadcrumb_PaddingRight1rem
--pf-c-page__main-breadcrumb--PaddingTopc_page__main_breadcrumb_PaddingTop0
--pf-c-page__main-breadcrumb--md--PaddingLeftc_page__main_breadcrumb_md_PaddingLeft1.5rem
--pf-c-page__main-breadcrumb--md--PaddingRightc_page__main_breadcrumb_md_PaddingRight1.5rem
--pf-c-page__main-breadcrumb--md--PaddingTopc_page__main_breadcrumb_md_PaddingTop1.5rem
--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_PaddingTop0.5rem
--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 * (1.5rem - 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 * (1.5rem - 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--main-breadcrumb--PaddingTopc_page__main_nav_main_breadcrumb_PaddingTop0
--pf-c-page__main-nav--md--PaddingLeftc_page__main_nav_md_PaddingLeft1.5rem
--pf-c-page__main-nav--md--PaddingRightc_page__main_nav_md_PaddingRight1.5rem
--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_PaddingBottom1.5rem
--pf-c-page__main-section--md--PaddingLeftc_page__main_section_md_PaddingLeft1.5rem
--pf-c-page__main-section--md--PaddingRightc_page__main_section_md_PaddingRight1.5rem
--pf-c-page__main-section--md--PaddingTopc_page__main_section_md_PaddingTop1.5rem
--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_PaddingTop0.5rem
--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