Skip to content
PatternFly

Page

The page component is used to define the basic layout of a page with either vertical or horizontal navigation.

Warning alert:Deprecated feature

This implementation has been deprecated in favor of a newer implementation, and is no longer getting maintained or enhanced. To learn more about the process, visit our about page.

Page header examples

Vertical navigation

This example shows the deprecated implementation of a page's vertical navigation. Our updated recommendation advises you to use a masthead and toolbar to make headers, rather than <PageHeader> and <PageHeaderTools> as shown in the following example.

Logo
header-tools
Navigation
Section with darker background
Section with dark background
Section with light background

Props

*required
NameTypeDefaultDescription
aria-controlsNo type infonull
aria-labelstring'Global navigation'Aria Label for the nav toggle button
classNamestring''Additional classes added to the page header
headerToolsReact.ReactNodenullComponent to render the header tools, use <PageHeaderTools />
isNavOpenbooleantrueTrue if the side nav is shown
logoReact.ReactNodenullComponent to render the logo/brand, use <Brand />
logoComponentReact.ReactNodeComponent to use to wrap the passed <logo>
logoPropsanynullAdditional props passed to the logo anchor container
navToggleIdstring'nav-toggle'Id for the nav toggle button
onNavToggle(event: React.MouseEvent) => void(_event: React.MouseEvent) => 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
rolestringundefinedSets the value for role on the <main> element
showNavTogglebooleanfalseTrue to show the nav toggle button (toggles side nav)
topNavReact.ReactNodenullComponent to render navigation within the header, use <Nav />

PageHeaderTools

*required
NameTypeDefaultDescription
childrenrequiredReact.ReactNodeContent rendered in page header tools
classNamestringAdditional classes added to the page header tools.

PageHeaderToolsGroup

*required
NameTypeDefaultDescription
childrenrequiredReact.ReactNodeContent rendered in the page header tools group
classNamestringAdditional classes added to the page header tools group.
visibility{ default?: 'hidden' | 'visible'; sm?: 'hidden' | 'visible'; md?: 'hidden' | 'visible'; lg?: 'hidden' | 'visible'; xl?: 'hidden' | 'visible'; '2xl'?: 'hidden' | 'visible'; }Visibility at various breakpoints.

PageHeaderToolsItem

*required
NameTypeDefaultDescription
childrenrequiredReact.ReactNodeContent rendered in page header tools item.
classNamestringAdditional classes added to the page header tools item.
idstringHTML id of the PageHeaderToolsItem
isSelectedbooleanTrue to make an icon button appear selected
visibility{ default?: 'hidden' | 'visible'; sm?: 'hidden' | 'visible'; md?: 'hidden' | 'visible'; lg?: 'hidden' | 'visible'; xl?: 'hidden' | 'visible'; '2xl'?: 'hidden' | 'visible'; }Visibility at various breakpoints.

CSS variables

Expand or collapse columnSelectorVariableValue
.pf-v5-c-page__sidebar.pf-m-light--pf-v5-global--Color--100
#151515
.pf-v5-c-page__sidebar.pf-m-light--pf-v5-global--Color--200
#6a6e73
.pf-v5-c-page__sidebar.pf-m-light--pf-v5-global--BorderColor--100
#d2d2d2
.pf-v5-c-page__sidebar.pf-m-light--pf-v5-global--primary-color--100
#06c
.pf-v5-c-page__sidebar.pf-m-light--pf-v5-global--link--Color
#06c
.pf-v5-c-page__sidebar.pf-m-light--pf-v5-global--link--Color--hover
#004080
.pf-v5-c-page__sidebar.pf-m-light--pf-v5-global--BackgroundColor--100
#fff
.pf-v5-c-page__sidebar.pf-m-light--pf-v5-global--icon--Color--light
#6a6e73
.pf-v5-c-page__sidebar.pf-m-light--pf-v5-global--icon--Color--dark
#151515
.pf-v5-c-page__sidebar.pf-m-light--pf-v5-c-page__sidebar--BackgroundColor
#fff
.pf-v5-c-page__main-section[class*=pf-m-dark-]--pf-v5-global--Color--100
#fff
.pf-v5-c-page__main-section[class*=pf-m-dark-]--pf-v5-global--Color--200
#f0f0f0
.pf-v5-c-page__main-section[class*=pf-m-dark-]--pf-v5-global--BorderColor--100
#b8bbbe
.pf-v5-c-page__main-section[class*=pf-m-dark-]--pf-v5-global--primary-color--100
#73bcf7
.pf-v5-c-page__main-section[class*=pf-m-dark-]--pf-v5-global--link--Color
#2b9af3
.pf-v5-c-page__main-section[class*=pf-m-dark-]--pf-v5-global--link--Color--hover
#2b9af3
.pf-v5-c-page__main-section[class*=pf-m-dark-]--pf-v5-global--BackgroundColor--100
#151515
.pf-v5-c-page__main-section[class*=pf-m-dark-]--pf-v5-global--icon--Color--light
#f0f0f0
.pf-v5-c-page__main-section[class*=pf-m-dark-]--pf-v5-global--icon--Color--dark
#fff
.pf-v5-c-page__main-section[class*=pf-m-dark-] .pf-v5-c-button--pf-v5-c-button--m-primary--BackgroundColor
#06c
.pf-v5-c-page__header-tools-item--pf-v5-hidden-visible--hidden--Display
none
.pf-v5-c-page__header-tools-item--pf-v5-hidden-visible--Display
block
.pf-v5-c-page__header-tools-item--pf-v5-hidden-visible--visible--Display
block
.pf-m-hidden.pf-v5-c-page__header-tools-item--pf-v5-hidden-visible--Display
none
:root--pf-v5-c-page--BackgroundColor
#f0f0f0
:root--pf-v5-c-page--inset
1rem
:root--pf-v5-c-page--xl--inset
1.5rem
:root--pf-v5-c-page__header--BackgroundColor
#151515
:root--pf-v5-c-page__header--ZIndex
300
:root--pf-v5-c-page__header--MinHeight
4.75rem
:root--pf-v5-c-page__header-brand--PaddingLeft
1rem
:root--pf-v5-c-page__header-brand--xl--PaddingRight
2rem
:root--pf-v5-c-page__header-brand--xl--PaddingLeft
1.5rem
:root--pf-v5-c-page__header-sidebar-toggle__c-button--PaddingTop
0.5rem
:root--pf-v5-c-page__header-sidebar-toggle__c-button--PaddingRight
0.5rem
:root--pf-v5-c-page__header-sidebar-toggle__c-button--PaddingBottom
0.5rem
:root--pf-v5-c-page__header-sidebar-toggle__c-button--PaddingLeft
0.5rem
:root--pf-v5-c-page__header-sidebar-toggle__c-button--MarginRight
1rem
:root--pf-v5-c-page__header-sidebar-toggle__c-button--MarginLeft
calc(0.5rem * -1)
:root--pf-v5-c-page__header-sidebar-toggle__c-button--FontSize
1.5rem
:root--pf-v5-c-page__header-brand-link--c-brand--MaxHeight
3.75rem
:root--pf-v5-c-page__header-nav--BackgroundColor
#212427
:root--pf-v5-c-page__header-nav--xl--BackgroundColor
transparent
:root--pf-v5-c-page__header-nav--xl--PaddingRight
2rem
:root--pf-v5-c-page__header-nav--xl--PaddingLeft
2rem
:root--pf-v5-c-page__header-tools--MarginRight
1rem
:root--pf-v5-c-page__header-tools--xl--MarginRight
1.5rem
:root--pf-v5-c-page__header-tools--c-avatar--MarginLeft
1rem
:root--pf-v5-c-page__header-tools-group--MarginLeft
2rem
:root--pf-v5-c-page__header-tools-group--Display
flex
:root--pf-v5-c-page__header-tools-item--Display
block
:root--pf-v5-c-page__header-tools-item--c-notification-badge--hover--BackgroundColor
#3c3f42
:root--pf-v5-c-page__header-tools--c-button--notification-badge--m-unread--after--BackgroundColor
#004080
:root--pf-v5-c-page__header-tools--c-button--notification-badge--m-attention--after--BackgroundColor
#a30000
:root--pf-v5-c-page__header-tools--c-button--m-selected--notification-badge--m-unread--after--BackgroundColor
#004080
:root--pf-v5-c-page__header-tools--c-button--m-selected--notification-badge--m-attention--after--BackgroundColor
#a30000
:root--pf-v5-c-page__header-tools--c-button--m-selected--before--Width
auto
:root--pf-v5-c-page__header-tools--c-button--m-selected--before--Height
auto
:root--pf-v5-c-page__header-tools--c-button--m-selected--before--BackgroundColor
#3c3f42
:root--pf-v5-c-page__header-tools--c-button--m-selected--before--BorderRadius
3px
:root--pf-v5-c-page__header-tools--c-button--m-selected--c-notification-badge--m-unread--after--BorderColor
transparent
:root--pf-v5-c-page__sidebar--ZIndex
200
:root--pf-v5-c-page__sidebar--Width
18.125rem
:root--pf-v5-c-page__sidebar--BackgroundColor
#212427
:root--pf-v5-c-page__sidebar--m-light--BackgroundColor
#fff
:root--pf-v5-c-page__sidebar--m-light--BorderRightWidth
1px
:root--pf-v5-c-page__sidebar--m-light--BorderRightColor
#d2d2d2
:root--pf-v5-c-page__sidebar--BoxShadow
0.75rem 0 0.75rem -0.5rem rgba(3, 3, 3, 0.18)
:root--pf-v5-c-page__sidebar--Transition
all 250ms cubic-bezier(.42, 0, .58, 1)
:root--pf-v5-c-page__sidebar--TranslateX
-100%
:root--pf-v5-c-page__sidebar--TranslateZ
0
:root--pf-v5-c-page__sidebar--m-expanded--TranslateX
0
:root--pf-v5-c-page__sidebar--xl--TranslateX
0
:root--pf-v5-c-page__sidebar-body--PaddingRight
0
:root--pf-v5-c-page__sidebar-body--PaddingLeft
0
:root--pf-v5-c-page__sidebar-body--m-page-insets--PaddingRight
1rem
:root--pf-v5-c-page__sidebar-body--m-page-insets--PaddingLeft
1rem
:root--pf-v5-c-page__sidebar-body--m-menu--BorderTopColor
#3c3f42
:root--pf-v5-c-page__sidebar-body--m-menu--BorderTopWidth
1px
:root--pf-v5-c-page__sidebar-body--m-menu--c-context-selector--BorderBottomColor
#3c3f42
:root--pf-v5-c-page__main--ZIndex
100
:root--pf-v5-c-page__main-section--PaddingTop
1rem
:root--pf-v5-c-page__main-section--PaddingRight
1rem
:root--pf-v5-c-page__main-section--PaddingBottom
1rem
:root--pf-v5-c-page__main-section--PaddingLeft
1rem
:root--pf-v5-c-page__main-section--xl--PaddingTop
1.5rem
:root--pf-v5-c-page__main-section--xl--PaddingRight
1.5rem
:root--pf-v5-c-page__main-section--xl--PaddingBottom
1.5rem
:root--pf-v5-c-page__main-section--xl--PaddingLeft
1.5rem
:root--pf-v5-c-page__main-breadcrumb--main-section--PaddingTop
1rem
:root--pf-v5-c-page__main-section--BackgroundColor
#f0f0f0
:root--pf-v5-c-page__main-section--m-light--BackgroundColor
#fff
:root--pf-v5-c-page__main-section--m-light-100--BackgroundColor
#fafafa
:root--pf-v5-c-page__main-section--m-dark-100--BackgroundColor
rgba(#030303, .62)
:root--pf-v5-c-page__main-section--m-dark-200--BackgroundColor
rgba(#030303, .32)
:root--pf-v5-c-page__main-breadcrumb--page__main-tabs--PaddingTop
1rem
:root--pf-v5-c-page__main-nav--page__main-tabs--PaddingTop
1rem
:root--pf-v5-c-page--section--m-limit-width--MaxWidth
calc(125rem - 18.125rem)
:root--pf-v5-c-page--section--m-sticky-top--ZIndex
300
:root--pf-v5-c-page--section--m-sticky-top--BoxShadow
0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
:root--pf-v5-c-page--section--m-sticky-bottom--ZIndex
300
:root--pf-v5-c-page--section--m-sticky-bottom--BoxShadow
0 -0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
:root--pf-v5-c-page--section--m-shadow-bottom--BoxShadow
0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
:root--pf-v5-c-page--section--m-shadow-bottom--ZIndex
100
:root--pf-v5-c-page--section--m-shadow-top--BoxShadow
0 -0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
:root--pf-v5-c-page--section--m-shadow-top--ZIndex
100
:root--pf-v5-c-page__main-nav--BackgroundColor
#fff
:root--pf-v5-c-page__main-nav--PaddingTop
1rem
:root--pf-v5-c-page__main-nav--PaddingRight
0
:root--pf-v5-c-page__main-nav--PaddingLeft
0
:root--pf-v5-c-page__main-nav--m-sticky-top--PaddingBottom
1rem
:root--pf-v5-c-page__main-nav--xl--PaddingRight
0.5rem
:root--pf-v5-c-page__main-nav--xl--PaddingLeft
0.5rem
:root--pf-v5-c-page__main-subnav--BackgroundColor
#212427
:root--pf-v5-c-page__main-subnav--BorderTopWidth
1px
:root--pf-v5-c-page__main-subnav--BorderTopColor
#3c3f42
:root--pf-v5-c-page__main-subnav--BorderLeftWidth
0
:root--pf-v5-c-page__main-subnav--BorderLeftColor
#3c3f42
:root--pf-v5-c-page__sidebar--main__main-subnav--BorderLeftWidth
1px
:root--pf-v5-c-page__sidebar--m-collapsed--main__main-subnav--BorderLeftWidth
0
:root--pf-v5-c-page__main-breadcrumb--BackgroundColor
#fff
:root--pf-v5-c-page__main-breadcrumb--PaddingTop
1rem
:root--pf-v5-c-page__main-breadcrumb--PaddingRight
1rem
:root--pf-v5-c-page__main-breadcrumb--PaddingBottom
0
:root--pf-v5-c-page__main-breadcrumb--PaddingLeft
1rem
:root--pf-v5-c-page__main-breadcrumb--m-sticky-top--PaddingBottom
1rem
:root--pf-v5-c-page__main-breadcrumb--xl--PaddingRight
1.5rem
:root--pf-v5-c-page__main-breadcrumb--xl--PaddingLeft
1.5rem
:root--pf-v5-c-page__main-tabs--PaddingTop
0
:root--pf-v5-c-page__main-tabs--PaddingRight
0
:root--pf-v5-c-page__main-tabs--PaddingBottom
0
:root--pf-v5-c-page__main-tabs--PaddingLeft
0
:root--pf-v5-c-page__main-tabs--BackgroundColor
#fff
:root--pf-v5-c-page__main-wizard--BackgroundColor
#fff
:root--pf-v5-c-page__main-wizard--BorderTopColor
#d2d2d2
:root--pf-v5-c-page__main-wizard--BorderTopWidth
1px
:root--pf-v5-c-page__main-wizard--m-light-200--BackgroundColor
#f0f0f0
.pf-v5-c-page__header-tools-group--pf-v5-hidden-visible--visible--Display
flex
.pf-v5-c-page__header-tools-item .pf-v5-c-notification-badge.pf-m-read:hover--pf-v5-c-notification-badge--after--BackgroundColor
#3c3f42
.pf-v5-c-page__header-tools-item.pf-m-selected .pf-v5-c-button .pf-v5-c-notification-badge.pf-m-unread--pf-v5-c-notification-badge--after--BackgroundColor
#004080
.pf-v5-c-page__header-tools-item.pf-m-selected .pf-v5-c-button .pf-v5-c-notification-badge.pf-m-attention--pf-v5-c-notification-badge--after--BackgroundColor
#a30000
.pf-v5-c-page__header-tools-item .pf-v5-c-button:focus .pf-v5-c-notification-badge.pf-m-unread--pf-v5-c-notification-badge--after--BackgroundColor
#004080
.pf-v5-c-page__header-tools-item .pf-v5-c-button:focus .pf-v5-c-notification-badge.pf-m-attention--pf-v5-c-notification-badge--after--BackgroundColor
#a30000
.pf-v5-c-page__sidebar.pf-m-expanded--pf-v5-c-page__sidebar--TranslateX
0
.pf-v5-c-page__sidebar-body.pf-m-menu + .pf-v5-c-page__sidebar-body.pf-m-menu--pf-v5-c-page__sidebar-body--m-menu--BorderTopWidth
0
.pf-v5-c-page__sidebar-body.pf-m-menu .pf-v5-c-context-selector--pf-v5-c-context-selector__toggle--BorderTopColor
transparent
.pf-v5-c-page__sidebar-body.pf-m-menu .pf-v5-c-context-selector--pf-v5-c-context-selector__toggle--BorderRightColor
transparent
.pf-v5-c-page__sidebar-body.pf-m-menu .pf-v5-c-context-selector--pf-v5-c-context-selector__toggle--BorderBottomColor
#3c3f42
.pf-v5-c-page__sidebar-body.pf-m-menu .pf-v5-c-context-selector--pf-v5-c-context-selector__toggle--BorderLeftColor
transparent
.pf-v5-c-page__sidebar-body.pf-m-menu .pf-v5-c-context-selector--pf-v5-c-context-selector__menu--Top
100%
.pf-v5-c-page__sidebar-body.pf-m-page-insets--pf-v5-c-page__sidebar-body--PaddingRight
1rem
.pf-v5-c-page__sidebar-body.pf-m-page-insets--pf-v5-c-page__sidebar-body--PaddingLeft
1rem
.pf-v5-c-page__sidebar-body.pf-m-inset-none--pf-v5-c-page__sidebar-body--PaddingRight
0
.pf-v5-c-page__sidebar-body.pf-m-inset-none--pf-v5-c-page__sidebar-body--PaddingLeft
0
.pf-v5-c-page__sidebar.pf-m-collapsed ~ .pf-v5-c-page__main--pf-v5-c-page__main-subnav--BorderLeftWidth
0
.pf-v5-c-page__main-breadcrumb + .pf-v5-c-page__main-section--pf-v5-c-page__main-section--PaddingTop
1rem
.pf-v5-c-page__main-breadcrumb.pf-m-sticky-top--pf-v5-c-page__main-breadcrumb--PaddingBottom
1rem
.pf-v5-c-page__main-nav + .pf-v5-c-page__main-tabs--pf-v5-c-page__main-tabs--PaddingTop
1rem
.pf-v5-c-page__main-breadcrumb + .pf-v5-c-page__main-tabs--pf-v5-c-page__main-tabs--PaddingTop
1rem
.pf-v5-c-page__main-section.pf-m-light--pf-v5-c-page__main-section--BackgroundColor
#fff
.pf-v5-c-page__main-section.pf-m-light-100--pf-v5-c-page__main-section--BackgroundColor
#fafafa
.pf-v5-c-page__main-section.pf-m-dark-100--pf-v5-c-page__main-section--BackgroundColor
rgba(#030303, .62)
.pf-v5-c-page__main-section.pf-m-dark-200--pf-v5-c-page__main-section--BackgroundColor
rgba(#030303, .32)
.pf-v5-c-page__main-wizard:first-child--pf-v5-c-page__main-wizard--BorderTopWidth
0
.pf-v5-c-page__main-wizard.pf-m-light-200--pf-v5-c-page__main-wizard--BackgroundColor
#f0f0f0

View source on GitHub
Red Hat
Copyright © 2014-2024 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines