Skip to Content
Patternfly Logo

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

Toolbar | Avatar
Navigation
Section with darker background
Section with dark background
Section with light background

Horizontal nav

Navigation
Toolbar | Avatar
Section with darker background
Section with dark background
Section with light background

Main Section Padding

Toolbar | Avatar
Navigation
Section with default padding
Section with no padding
Section with no padding on mobile only

With or without fill

Toolbar | Avatar
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.ReactNodeNonullContent rendered inside the main section of the page layout (e.g. <PageSection />)
classNamestringNo''Additional classes added to the page layout
headerReact.ReactNodeNonullHeader component (e.g. <PageHeader />)
sidebarReact.ReactNodeNonullSidebar component for a side nav (e.g. <PageSidebar />)
skipToContentReact.ReactElementNonullSkip to content component for the page
rolestringNoundefinedSets the value for role on the <main> element
mainContainerIdstringNonullan id to use for the [role="main"] element
isManagedSidebarbooleanNofalseIf 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
defaultManagedSidebarIsOpenbooleanNotrueIf true, the managed sidebar is initially open for desktop view
onPageResize(object: any) => voidNo(): 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.ReactNodeNonullBreadcrumb component for the page
mainAriaLabelstringNoAccessible label, can be used to name main section
PageHeader properties
NameTypeRequiredDefaultDescription
classNamestringNo''Additional classes added to the page header
logoReact.ReactNodeNonullComponent to render the logo/brand (e.g. <Brand />)
logoPropsobjectNonullAdditional props passed to the logo anchor container
logoComponentReact.ReactNodeNo'a'Component to use to wrap the passed <logo>
toolbarReact.ReactNodeNonullComponent to render the toolbar (e.g. <Toolbar />)
avatarReact.ReactNodeNonullComponent to render the avatar (e.g. <Avatar />
topNavReact.ReactNodeNonullComponent to render navigation within the header (e.g. <Nav />
showNavTogglebooleanNofalseTrue to show the nav toggle button (toggles side nav)
isNavOpenbooleanNotrueTrue if the side nav is shown
isManagedSidebarbooleanNoIf 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
rolestringNoundefinedSets the value for role on the <main> element
onNavToggle() => voidNo() => 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-labelstringNo'Global navigation'Aria Label for the nav toggle button
PageSidebar properties
NameTypeRequiredDefaultDescription
classNamestringNo''Additional classes added to the page sidebar
navReact.ReactNodeNoComponent to render the side navigation (e.g. <Nav />
isManagedSidebarbooleanNoIf 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
isNavOpenbooleanNotrueProgrammatically manage if the side nav is shown, if isManagedSidebar is set to true in the Page component, this prop is managed
theme'dark' | 'light'No'light'Indicates the color scheme of the sidebar
PageSection properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNoContent rendered inside the section
classNamestringNo''Additional classes added to the section
variant'default' | 'light' | 'dark' | 'darker'No'default'Section background color variant
type'default' | 'nav'No'default'Section type variant
isFilledbooleanNoEnables the page section to fill the available vertical space
noPaddingbooleanNofalseModifies a main page section to have no padding
noPaddingMobilebooleanNofalseModifies 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--c-button--m-selected--before--BackgroundColorc_page__header_tools_c_button_m_selected_before_BackgroundColor
#3c3f42
--pf-c-page__header-tools--c-button--m-selected--before--BorderRadiusc_page__header_tools_c_button_m_selected_before_BorderRadius
30em
--pf-c-page__header-tools--c-button--m-selected--before--Heightc_page__header_tools_c_button_m_selected_before_Height
2.25rem
--pf-c-page__header-tools--c-button--m-selected--before--Widthc_page__header_tools_c_button_m_selected_before_Width
2.25rem
--pf-c-page__header-tools--c-button--m-selected--c-notification-badge--m-unread--after--BorderColorc_page__header_tools_c_button_m_selected_c_notification_badge_m_unread_after_BorderColor
#3c3f42
--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