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 nav

Navigation
Section with darker background
Section with dark background
Section with light background

Horizontal nav

Section with darker background
Section with dark background
Section with light background

Main Section Padding

Navigation
Section with default padding
Section with no padding
Section with no padding on mobile only

With or without fill

Navigation
This section is set to the default fill variant
This section fills the available space.
This section does not fill the available space.

Props

Page properties
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
mainContainerIdstringnull as stringan id to use for the [role="main"] element
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
defaultManagedSidebarIsOpenbooleantrueIf true, the managed sidebar is initially open for desktop view
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 properties
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
PageSidebar properties
NameTypeRequiredDefaultDescription
classNamestring''Additional classes added to the page sidebar
navReact.ReactNodeComponent to render the side navigation (e.g. <Nav />
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
isNavOpenbooleantrueProgrammatically manage if the side nav is shown, if isManagedSidebar is set to true in the Page component, this prop is managed
theme'dark' | 'light''light'Indicates the color scheme of the sidebar
PageSection properties
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

CSS Variables

--pf-c-page__header-brand-link--c-brand--MaxHeightc_page__header_brand_link_c_brand_MaxHeight
3.75rem
--pf-c-page__header-brand--md--PaddingLeftc_page__header_brand_md_PaddingLeft
1.5rem
--pf-c-page__header-brand--md--PaddingRightc_page__header_brand_md_PaddingRight
2rem
--pf-c-page__header-brand--PaddingLeftc_page__header_brand_PaddingLeft
1rem
--pf-c-page__header--MinHeightc_page__header_MinHeight
4.75rem
--pf-c-page__header-nav--BackgroundColorc_page__header_nav_BackgroundColor
#212427
--pf-c-page__header-nav--c-nav__scroll-button--lg--BackgroundColorc_page__header_nav_c_nav__scroll_button_lg_BackgroundColor
#212427
--pf-c-page__header-nav--c-nav__scroll-button--lg--Topc_page__header_nav_c_nav__scroll_button_lg_Top
0
--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_Left
calc(-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_Left
0
--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_Left
calc(-1*(1rem - 0.25rem))
--pf-c-page__header-nav--lg--BackgroundColorc_page__header_nav_lg_BackgroundColor
transparent
--pf-c-page__header-nav--lg--MarginLeftc_page__header_nav_lg_MarginLeft
2rem
--pf-c-page__header-nav--lg--MarginRightc_page__header_nav_lg_MarginRight
2rem
--pf-c-page__header-nav--lg--PaddingLeftc_page__header_nav_lg_PaddingLeft
0
--pf-c-page__header-nav--md--PaddingLeftc_page__header_nav_md_PaddingLeft
1.5rem
--pf-c-page__header-nav--PaddingLeftc_page__header_nav_PaddingLeft
1rem
--pf-c-page__header-sidebar-toggle__c-button--FontSizec_page__header_sidebar_toggle__c_button_FontSize
1.5rem
--pf-c-page__header-sidebar-toggle__c-button--MarginLeftc_page__header_sidebar_toggle__c_button_MarginLeft
calc(0.5rem*-1)
--pf-c-page__header-sidebar-toggle__c-button--MarginRightc_page__header_sidebar_toggle__c_button_MarginRight
1rem
--pf-c-page__header-sidebar-toggle__c-button--md--MarginLeftc_page__header_sidebar_toggle__c_button_md_MarginLeft
calc(0.5rem*-1)
--pf-c-page__header-sidebar-toggle__c-button--PaddingBottomc_page__header_sidebar_toggle__c_button_PaddingBottom
0.5rem
--pf-c-page__header-sidebar-toggle__c-button--PaddingLeftc_page__header_sidebar_toggle__c_button_PaddingLeft
0.5rem
--pf-c-page__header-sidebar-toggle__c-button--PaddingRightc_page__header_sidebar_toggle__c_button_PaddingRight
0.5rem
--pf-c-page__header-sidebar-toggle__c-button--PaddingTopc_page__header_sidebar_toggle__c_button_PaddingTop
0.5rem
--pf-c-page__header-tools--c-avatar--MarginLeftc_page__header_tools_c_avatar_MarginLeft
1rem
--pf-c-page__header-tools-group--MarginLeftc_page__header_tools_group_MarginLeft
2rem
--pf-c-page__header-tools--MarginBottomc_page__header_tools_MarginBottom
0.5rem
--pf-c-page__header-tools--MarginRightc_page__header_tools_MarginRight
1rem
--pf-c-page__header-tools--MarginTopc_page__header_tools_MarginTop
0.5rem
--pf-c-page__header-tools--md--MarginRightc_page__header_tools_md_MarginRight
1.5rem
--pf-c-page__header--ZIndexc_page__header_ZIndex
300
--pf-c-page__main-breadcrumb--BackgroundColorc_page__main_breadcrumb_BackgroundColor
#fff
--pf-c-page__main-breadcrumb--md--PaddingLeftc_page__main_breadcrumb_md_PaddingLeft
1.5rem
--pf-c-page__main-breadcrumb--md--PaddingRightc_page__main_breadcrumb_md_PaddingRight
1.5rem
--pf-c-page__main-breadcrumb--md--PaddingTopc_page__main_breadcrumb_md_PaddingTop
1.5rem
--pf-c-page__main-breadcrumb--PaddingBottomc_page__main_breadcrumb_PaddingBottom
0
--pf-c-page__main-breadcrumb--PaddingLeftc_page__main_breadcrumb_PaddingLeft
1rem
--pf-c-page__main-breadcrumb--PaddingRightc_page__main_breadcrumb_PaddingRight
1rem
--pf-c-page__main-breadcrumb--PaddingTopc_page__main_breadcrumb_PaddingTop
0
--pf-c-page__main-nav--BackgroundColorc_page__main_nav_BackgroundColor
#fff
--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_Left
calc(-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_Left
calc(-1*(1rem - 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_Right
calc(-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_Right
calc(-1*(1.5rem - 0.25rem))
--pf-c-page__main-nav--main-breadcrumb--PaddingTopc_page__main_nav_main_breadcrumb_PaddingTop
0
--pf-c-page__main-nav--md--PaddingLeftc_page__main_nav_md_PaddingLeft
1.5rem
--pf-c-page__main-nav--md--PaddingRightc_page__main_nav_md_PaddingRight
1.5rem
--pf-c-page__main-nav--PaddingBottomc_page__main_nav_PaddingBottom
1rem
--pf-c-page__main-nav--PaddingLeftc_page__main_nav_PaddingLeft
1rem
--pf-c-page__main-nav--PaddingRightc_page__main_nav_PaddingRight
1rem
--pf-c-page__main-nav--PaddingTopc_page__main_nav_PaddingTop
0.5rem
--pf-c-page__main-section--BackgroundColorc_page__main_section_BackgroundColor
rgba(3,3,3,0.32)
--pf-c-page__main-section--m-dark-100--BackgroundColorc_page__main_section_m_dark_100_BackgroundColor
rgba(3,3,3,0.62)
--pf-c-page__main-section--m-dark-200--BackgroundColorc_page__main_section_m_dark_200_BackgroundColor
rgba(3,3,3,0.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_PaddingBottom
0
--pf-c-page__main-section--m-no-padding-mobile--md--PaddingLeftc_page__main_section_m_no_padding_mobile_md_PaddingLeft
0
--pf-c-page__main-section--m-no-padding-mobile--md--PaddingRightc_page__main_section_m_no_padding_mobile_md_PaddingRight
0
--pf-c-page__main-section--m-no-padding-mobile--md--PaddingTopc_page__main_section_m_no_padding_mobile_md_PaddingTop
0
--pf-c-page__main-section--md--PaddingBottomc_page__main_section_md_PaddingBottom
1.5rem
--pf-c-page__main-section--md--PaddingLeftc_page__main_section_md_PaddingLeft
1.5rem
--pf-c-page__main-section--md--PaddingRightc_page__main_section_md_PaddingRight
1.5rem
--pf-c-page__main-section--md--PaddingTopc_page__main_section_md_PaddingTop
1.5rem
--pf-c-page__main-section--PaddingBottomc_page__main_section_PaddingBottom
1rem
--pf-c-page__main-section--PaddingLeftc_page__main_section_PaddingLeft
1rem
--pf-c-page__main-section--PaddingRightc_page__main_section_PaddingRight
1rem
--pf-c-page__main-section--PaddingTopc_page__main_section_PaddingTop
1rem
--pf-c-page__main-wizard--BorderTopColorc_page__main_wizard_BorderTopColor
#d2d2d2
--pf-c-page__main-wizard--BorderTopWidthc_page__main_wizard_BorderTopWidth
1px
--pf-c-page__main--ZIndexc_page__main_ZIndex
auto
--pf-c-page__sidebar--BackgroundColorc_page__sidebar_BackgroundColor
#212427
--pf-c-page__sidebar-body--PaddingBottomc_page__sidebar_body_PaddingBottom
1rem
--pf-c-page__sidebar-body--PaddingTopc_page__sidebar_body_PaddingTop
0.5rem
--pf-c-page__sidebar--BoxShadowc_page__sidebar_BoxShadow
0.75rem 0 0.625rem -0.25rem rgba(3,3,3,0.07)
--pf-c-page__sidebar--m-dark--BackgroundColorc_page__sidebar_m_dark_BackgroundColor
#212427
--pf-c-page__sidebar--m-expanded--Transformc_page__sidebar_m_expanded_Transform
translateZ(0)
--pf-c-page__sidebar--md--Transformc_page__sidebar_md_Transform
translateZ(0)
--pf-c-page__sidebar--md--Widthc_page__sidebar_md_Width
18.125rem
--pf-c-page__sidebar--Transformc_page__sidebar_Transform
translateZ(0)
--pf-c-page__sidebar--Transitionc_page__sidebar_Transition
all 250ms ease-in-out
--pf-c-page__sidebar--Widthc_page__sidebar_Width
80%
--pf-c-page__sidebar--ZIndexc_page__sidebar_ZIndex
200
--pf-c-page--BackgroundColorc_page_BackgroundColor
#151515