Patternfly Logo

Examples

Vertical nav

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

Horizontal nav

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

Tertiary nav

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

Main Section Padding

header-tools
Navigation
Section with default padding
Section with no padding
Section with padding only on medium/large
Section with no padding on medium

With or without fill

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

Uncontrolled nav

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

Props

Page properties
NameTypeRequiredDefaultDescription
breadcrumbReact.ReactNodeNoBreadcrumb component for the page
childrenReact.ReactNodeNoContent rendered inside the main section of the page layout (e.g. <PageSection />)
classNamestringNoAdditional classes added to the page layout
defaultManagedSidebarIsOpenbooleanNotrueIf true, the managed sidebar is initially open for desktop view
headerReact.ReactNodeNoHeader component (e.g. <PageHeader />)
isBreadcrumbWidthLimitedbooleanNofalseFlag indicating if breadcrumb width should be limited
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
isNotificationDrawerExpandedbooleanNofalseFlag indicating Notification drawer in expanded
isTertiaryNavWidthLimitedbooleanNoFlag indicating if tertiary nav width should be limited
mainAriaLabelstringNoAccessible label, can be used to name main section
mainContainerIdstringNoan id to use for the [role="main"] element
mainTabIndexnumber | nullNo-1tabIndex to use for the [role="main"] element, null to unset it
notificationDrawerReact.ReactNodeNoNotification drawer component for an optional notification drawer (e.g. <NotificationDrawer />)
onNotificationDrawerExpand() => voidNo() => nullCallback when notification drawer panel is finished expanding.
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 }
rolestringNoSets the value for role on the <main> element
sidebarReact.ReactNodeNoSidebar component for a side nav (e.g. <PageSidebar />)
skipToContentReact.ReactElementNoSkip to content component for the page
tertiaryNavReact.ReactNodeNoTertiary nav component for the page
PageHeader properties
NameTypeRequiredDefaultDescription
aria-controlsNo type infoNonull
aria-labelstringNo'Global navigation'Aria Label for the nav toggle button
classNamestringNo''Additional classes added to the page header
headerToolsReact.ReactNodeNonullComponent to render the header tools, use <PageHeaderTools />
isManagedSidebarbooleanNoundefinedThis prop is no longer managed through PageHeader but in the Page component.
isNavOpenbooleanNotrueTrue if the side nav is shown
logoReact.ReactNodeNonullComponent to render the logo/brand, use <Brand />
logoComponentReact.ReactNodeNo'a'Component to use to wrap the passed <logo>
logoPropsobjectNonullAdditional props passed to the logo anchor container
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
rolestringNoundefinedSets the value for role on the <main> element
showNavTogglebooleanNofalseTrue to show the nav toggle button (toggles side nav)
topNavReact.ReactNodeNonullComponent to render navigation within the header, use <Nav />
PageHeaderTools properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeYesContent rendered in page header tools
classNamestringNoAdditional classes added to the page header tools.
PageHeaderToolsGroup properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeYesContent rendered in the page header tools group
classNamestringNoAdditional 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'; }NoVisibility at various breakpoints.
PageHeaderToolsItem properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeYesContent rendered in page header tools item.
classNamestringNoAdditional classes added to the page header tools item.
idstringNoHTML id of the PageHeaderToolsItem
isSelectedbooleanNoTrue 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'; }NoVisibility at various breakpoints.
PageSidebar properties
NameTypeRequiredDefaultDescription
classNamestringNo''Additional classes added to the page sidebar
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
navReact.ReactNodeNoComponent to render the side navigation (e.g. <Nav />
theme'dark' | 'light'No'dark'Indicates the color scheme of the sidebar
PageSection properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNoContent rendered inside the section
classNamestringNo''Additional classes added to the section
isFilledbooleanNoEnables the page section to fill the available vertical space
isWidthLimitedbooleanNofalseLimits the width of the section
padding{ default?: 'padding' | 'noPadding'; sm?: 'padding' | 'noPadding'; md?: 'padding' | 'noPadding'; lg?: 'padding' | 'noPadding'; xl?: 'padding' | 'noPadding'; '2xl'?: 'padding' | 'noPadding'; }NoPadding at various breakpoints.
type'default' | 'nav'No'default'Section type variant
variant'default' | 'light' | 'dark' | 'darker'No'default'Section background color variant

CSS variables

.pf-c-page__sidebar.pf-m-light--pf-global--Color--100
#151515
.pf-c-page__sidebar.pf-m-light--pf-global--Color--200
#6a6e73
.pf-c-page__sidebar.pf-m-light--pf-global--BorderColor--100
#d2d2d2
.pf-c-page__sidebar.pf-m-light--pf-global--primary-color--100
#06c
.pf-c-page__sidebar.pf-m-light--pf-global--link--Color
#06c
.pf-c-page__sidebar.pf-m-light--pf-global--link--Color--hover
#004080
.pf-c-page__sidebar.pf-m-light--pf-global--BackgroundColor--100
#fff
.pf-c-page__sidebar.pf-m-light--pf-c-page__sidebar--BackgroundColor
#fff
.pf-c-page__header--pf-global--Color--100
#fff
.pf-c-page__header--pf-global--Color--200
#f0f0f0
.pf-c-page__header--pf-global--BorderColor--100
#b8bbbe
.pf-c-page__header--pf-global--primary-color--100
#73bcf7
.pf-c-page__header--pf-global--link--Color
#73bcf7
.pf-c-page__header--pf-global--link--Color--hover
#73bcf7
.pf-c-page__header--pf-global--BackgroundColor--100
#151515
.pf-c-page__header .pf-c-card--pf-c-card--BackgroundColor
rgba(#030303, .32)
.pf-c-page__header .pf-c-button--pf-c-button--m-primary--Color
#06c
.pf-c-page__header .pf-c-button--pf-c-button--m-primary--hover--Color
#06c
.pf-c-page__header .pf-c-button--pf-c-button--m-primary--focus--Color
#06c
.pf-c-page__header .pf-c-button--pf-c-button--m-primary--active--Color
#06c
.pf-c-page__header .pf-c-button--pf-c-button--m-primary--BackgroundColor
#fff
.pf-c-page__header .pf-c-button--pf-c-button--m-primary--hover--BackgroundColor
#f0f0f0
.pf-c-page__header .pf-c-button--pf-c-button--m-primary--focus--BackgroundColor
#f0f0f0
.pf-c-page__header .pf-c-button--pf-c-button--m-primary--active--BackgroundColor
#f0f0f0
.pf-c-page__header .pf-c-button--pf-c-button--m-secondary--Color
#fff
.pf-c-page__header .pf-c-button--pf-c-button--m-secondary--hover--Color
#fff
.pf-c-page__header .pf-c-button--pf-c-button--m-secondary--focus--Color
#fff
.pf-c-page__header .pf-c-button--pf-c-button--m-secondary--active--Color
#fff
.pf-c-page__header .pf-c-button--pf-c-button--m-secondary--BorderColor
#fff
.pf-c-page__header .pf-c-button--pf-c-button--m-secondary--hover--BorderColor
#fff
.pf-c-page__header .pf-c-button--pf-c-button--m-secondary--focus--BorderColor
#fff
.pf-c-page__header .pf-c-button--pf-c-button--m-secondary--active--BorderColor
#fff
.pf-c-page__header-tools-group--pf-hidden-visible--visible--Visibility
visible
.pf-c-page__header-tools-group--pf-hidden-visible--hidden--Display
none
.pf-c-page__header-tools-group--pf-hidden-visible--hidden--Visibility
hidden
.pf-c-page__header-tools-group--pf-hidden-visible--Display
flex
.pf-c-page__header-tools-group--pf-hidden-visible--Visibility
visible
.pf-c-page__header-tools-group--pf-hidden-visible--visible--Display
flex
.pf-m-hidden.pf-c-page__header-tools-group--pf-hidden-visible--Display
none
.pf-m-hidden.pf-c-page__header-tools-group--pf-hidden-visible--Visibility
hidden
.pf-c-page--pf-c-page--BackgroundColor
#f0f0f0
.pf-c-page--pf-c-page__header--BackgroundColor
#151515
.pf-c-page--pf-c-page__header--ZIndex
300
.pf-c-page--pf-c-page__header--MinHeight
4.75rem
.pf-c-page--pf-c-page__header-brand--PaddingLeft
1rem
.pf-c-page--pf-c-page__header-brand--xl--PaddingRight
2rem
.pf-c-page--pf-c-page__header-brand--xl--PaddingLeft
1.5rem
.pf-c-page--pf-c-page__header-sidebar-toggle__c-button--PaddingTop
0.5rem
.pf-c-page--pf-c-page__header-sidebar-toggle__c-button--PaddingRight
0.5rem
.pf-c-page--pf-c-page__header-sidebar-toggle__c-button--PaddingBottom
0.5rem
.pf-c-page--pf-c-page__header-sidebar-toggle__c-button--PaddingLeft
0.5rem
.pf-c-page--pf-c-page__header-sidebar-toggle__c-button--MarginRight
1rem
.pf-c-page--pf-c-page__header-sidebar-toggle__c-button--MarginLeft
calc(0.5rem * -1)
.pf-c-page--pf-c-page__header-sidebar-toggle__c-button--FontSize
1.5rem
.pf-c-page--pf-c-page__header-brand-link--c-brand--MaxHeight
3.75rem
.pf-c-page--pf-c-page__header-nav--BackgroundColor
#212427
.pf-c-page--pf-c-page__header-nav--xl--BackgroundColor
transparent
.pf-c-page--pf-c-page__header-nav--xl--PaddingRight
2rem
.pf-c-page--pf-c-page__header-nav--xl--PaddingLeft
2rem
.pf-c-page--pf-c-page__header-tools--MarginRight
1rem
.pf-c-page--pf-c-page__header-tools--xl--MarginRight
1.5rem
.pf-c-page--pf-c-page__header-tools--c-avatar--MarginLeft
1rem
.pf-c-page--pf-c-page__header-tools-group--MarginLeft
2rem
.pf-c-page--pf-c-page__header-tools-group--Display
flex
.pf-c-page--pf-c-page__header-tools-item--Display
block
.pf-c-page--pf-c-page__header-tools-item--c-notification-badge--hover--BackgroundColor
#3c3f42
.pf-c-page--pf-c-page__header-tools--c-button--notification-badge--m-unread--after--BackgroundColor
#004080
.pf-c-page--pf-c-page__header-tools--c-button--notification-badge--m-attention--after--BackgroundColor
#a30000
.pf-c-page--pf-c-page__header-tools--c-button--m-selected--notification-badge--m-unread--after--BackgroundColor
#004080
.pf-c-page--pf-c-page__header-tools--c-button--m-selected--notification-badge--m-attention--after--BackgroundColor
#a30000
.pf-c-page--pf-c-page__header-tools--c-button--m-selected--before--Width
auto
.pf-c-page--pf-c-page__header-tools--c-button--m-selected--before--Height
auto
.pf-c-page--pf-c-page__header-tools--c-button--m-selected--before--BackgroundColor
#3c3f42
.pf-c-page--pf-c-page__header-tools--c-button--m-selected--before--BorderRadius
3px
.pf-c-page--pf-c-page__header-tools--c-button--m-selected--c-notification-badge--m-unread--after--BorderColor
transparent
.pf-c-page--pf-c-page__sidebar--ZIndex
200
.pf-c-page--pf-c-page__sidebar--Width
18.125rem
.pf-c-page--pf-c-page__sidebar--BackgroundColor
#212427
.pf-c-page--pf-c-page__sidebar--m-light--BackgroundColor
#fff
.pf-c-page--pf-c-page__sidebar--BoxShadow
0.75rem 0 0.75rem -0.5rem rgba(3, 3, 3, 0.18)
.pf-c-page--pf-c-page__sidebar--Transition
all 250ms cubic-bezier(.42, 0, .58, 1)
.pf-c-page--pf-c-page__sidebar--TranslateX
-100%
.pf-c-page--pf-c-page__sidebar--TranslateZ
0
.pf-c-page--pf-c-page__sidebar--m-expanded--TranslateX
0
.pf-c-page--pf-c-page__sidebar--xl--TranslateX
0
.pf-c-page--pf-c-page__sidebar-body--PaddingTop
0.5rem
.pf-c-page--pf-c-page__sidebar-body--PaddingBottom
1rem
.pf-c-page--pf-c-page__main--ZIndex
100
.pf-c-page--pf-c-page__main-section--PaddingTop
1rem
.pf-c-page--pf-c-page__main-section--PaddingRight
1rem
.pf-c-page--pf-c-page__main-section--PaddingBottom
1rem
.pf-c-page--pf-c-page__main-section--PaddingLeft
1rem
.pf-c-page--pf-c-page__main-section--xl--PaddingTop
1.5rem
.pf-c-page--pf-c-page__main-section--xl--PaddingRight
1.5rem
.pf-c-page--pf-c-page__main-section--xl--PaddingBottom
1.5rem
.pf-c-page--pf-c-page__main-section--xl--PaddingLeft
1.5rem
.pf-c-page--pf-c-page__main-breadcrumb--main-section--PaddingTop
1rem
.pf-c-page--pf-c-page__main-section--BackgroundColor
#f0f0f0
.pf-c-page--pf-c-page__main-section--m-light--BackgroundColor
#fff
.pf-c-page--pf-c-page__main-section--m-dark-100--BackgroundColor
rgba(#030303, .62)
.pf-c-page--pf-c-page__main-section--m-dark-200--BackgroundColor
rgba(#030303, .32)
.pf-c-page--pf-c-page--section--m-limit-width--MaxWidth
calc(125rem - 18.125rem)
.pf-c-page--pf-c-page--section--m-sticky-top--ZIndex
100
.pf-c-page--pf-c-page--section--m-sticky-top--BoxShadow
0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
.pf-c-page--pf-c-page--section--m-sticky-bottom--ZIndex
100
.pf-c-page--pf-c-page--section--m-sticky-bottom--BoxShadow
0 -0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
.pf-c-page--pf-c-page--section--m-shadow-bottom--BoxShadow
0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
.pf-c-page--pf-c-page--section--m-shadow-bottom--ZIndex
100
.pf-c-page--pf-c-page--section--m-shadow-top--BoxShadow
0 -0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
.pf-c-page--pf-c-page--section--m-shadow-top--ZIndex
100
.pf-c-page--pf-c-page__main-nav--BackgroundColor
#fff
.pf-c-page--pf-c-page__main-nav--PaddingTop
1rem
.pf-c-page--pf-c-page__main-nav--PaddingRight
0
.pf-c-page--pf-c-page__main-nav--PaddingLeft
0
.pf-c-page--pf-c-page__main-nav--m-sticky-top--PaddingBottom
1rem
.pf-c-page--pf-c-page__main-nav--xl--PaddingRight
0.5rem
.pf-c-page--pf-c-page__main-nav--xl--PaddingLeft
0.5rem
.pf-c-page--pf-c-page__main-breadcrumb--BackgroundColor
#fff
.pf-c-page--pf-c-page__main-breadcrumb--PaddingTop
1rem
.pf-c-page--pf-c-page__main-breadcrumb--PaddingRight
1rem
.pf-c-page--pf-c-page__main-breadcrumb--PaddingBottom
0
.pf-c-page--pf-c-page__main-breadcrumb--PaddingLeft
1rem
.pf-c-page--pf-c-page__main-breadcrumb--m-sticky-top--PaddingBottom
1rem
.pf-c-page--pf-c-page__main-breadcrumb--xl--PaddingRight
1.5rem
.pf-c-page--pf-c-page__main-breadcrumb--xl--PaddingLeft
1.5rem
.pf-c-page--pf-c-page__main-wizard--BackgroundColor
#fff
.pf-c-page--pf-c-page__main-wizard--BorderTopColor
#d2d2d2
.pf-c-page--pf-c-page__main-wizard--BorderTopWidth
1px
.pf-c-page__header-tools-item--pf-hidden-visible--visible--Display
block
.pf-c-page__header-tools-item .pf-c-notification-badge.pf-m-read:hover--pf-c-notification-badge--after--BackgroundColor
#3c3f42
.pf-c-page__header-tools-item.pf-m-selected .pf-c-button .pf-c-notification-badge.pf-m-unread--pf-c-notification-badge--after--BackgroundColor
#004080
.pf-c-page__header-tools-item.pf-m-selected .pf-c-button .pf-c-notification-badge.pf-m-attention--pf-c-notification-badge--after--BackgroundColor
#a30000
.pf-c-page__header-tools-item .pf-c-button:focus .pf-c-notification-badge.pf-m-unread--pf-c-notification-badge--after--BackgroundColor
#004080
.pf-c-page__header-tools-item .pf-c-button:focus .pf-c-notification-badge.pf-m-attention--pf-c-notification-badge--after--BackgroundColor
#a30000
.pf-c-page__sidebar.pf-m-expanded--pf-c-page__sidebar--TranslateX
0
.pf-c-page__main-breadcrumb + .pf-c-page__main-section--pf-c-page__main-section--PaddingTop
1rem
.pf-c-page__main-breadcrumb.pf-m-sticky-top--pf-c-page__main-breadcrumb--PaddingBottom
1rem
.pf-c-page__main-section.pf-m-light--pf-c-page__main-section--BackgroundColor
#fff
.pf-c-page__main-section.pf-m-dark-100--pf-c-page__main-section--BackgroundColor
rgba(#030303, .62)
.pf-c-page__main-section.pf-m-dark-200--pf-c-page__main-section--BackgroundColor
rgba(#030303, .32)
.pf-c-page__main-section.pf-m-no-padding--pf-c-page__main-section--PaddingTop
0
.pf-c-page__main-section.pf-m-no-padding--pf-c-page__main-section--PaddingRight
0
.pf-c-page__main-section.pf-m-no-padding--pf-c-page__main-section--PaddingBottom
0
.pf-c-page__main-section.pf-m-no-padding--pf-c-page__main-section--PaddingLeft
0

View source on GitHub