Examples
Main Section Padding
header-tools
With or without fill
header-tools
Props
Page
Name | Type | Required | Default | Description |
---|---|---|---|---|
additionalGroupedContent | React.ReactNode | No | Additional content of the group | |
breadcrumb | React.ReactNode | No | Breadcrumb component for the page | |
children | React.ReactNode | No | Content rendered inside the main section of the page layout (e.g. <PageSection />) | |
className | string | No | Additional classes added to the page layout | |
defaultManagedSidebarIsOpen | boolean | No | true | If true, the managed sidebar is initially open for desktop view |
groupProps | PageGroupProps | No | Additional props of the group | |
header | React.ReactNode | No | Header component (e.g. <PageHeader />) | |
isBreadcrumbGrouped | boolean | No | Flag indicating if the breadcrumb should be in a group | |
isBreadcrumbWidthLimited | boolean | No | false | Flag indicating if breadcrumb width should be limited |
isManagedSidebar | boolean | No | false | If 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 |
isNotificationDrawerExpanded | boolean | No | false | Flag indicating Notification drawer in expanded |
isTertiaryNavGrouped | boolean | No | Flag indicating if the tertiaryNav should be in a group | |
isTertiaryNavWidthLimited | boolean | No | Flag indicating if tertiary nav width should be limited | |
mainAriaLabel | string | No | Accessible label, can be used to name main section | |
mainContainerId | string | No | an id to use for the [role="main"] element | |
mainTabIndex | number | null | No | -1 | tabIndex to use for the [role="main"] element, null to unset it |
notificationDrawer | React.ReactNode | No | Notification drawer component for an optional notification drawer (e.g. <NotificationDrawer />) | |
onNotificationDrawerExpand | () => void | No | () => null | Callback when notification drawer panel is finished expanding. |
onPageResize | (object: any) => void | No | (): void => null | Can 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 } |
role | string | No | Sets the value for role on the <main> element | |
sidebar | React.ReactNode | No | Sidebar component for a side nav (e.g. <PageSidebar />) | |
skipToContent | React.ReactElement | No | Skip to content component for the page | |
tertiaryNav | React.ReactNode | No | Tertiary nav component for the page |
PageHeader
Name | Type | Required | Default | Description |
---|---|---|---|---|
aria-controls | No type info | No | null | |
aria-label | string | No | 'Global navigation' | Aria Label for the nav toggle button |
className | string | No | '' | Additional classes added to the page header |
headerTools | React.ReactNode | No | null | Component to render the header tools, use <PageHeaderTools /> |
isManagedSidebar | boolean | No | undefined | This prop is no longer managed through PageHeader but in the Page component. |
isNavOpen | boolean | No | true | True if the side nav is shown |
logo | React.ReactNode | No | null | Component to render the logo/brand, use <Brand /> |
logoComponent | React.ReactNode | No | 'a' | Component to use to wrap the passed <logo> |
logoProps | object | No | null | Additional props passed to the logo anchor container |
onNavToggle | () => void | No | () => undefined as any | Callback function to handle the side nav toggle button, managed by the Page component if the Page isManagedSidebar prop is set to true |
role | string | No | undefined | Sets the value for role on the <main> element |
showNavToggle | boolean | No | false | True to show the nav toggle button (toggles side nav) |
topNav | React.ReactNode | No | null | Component to render navigation within the header, use <Nav /> |
PageHeaderTools
Name | Type | Required | Default | Description |
---|---|---|---|---|
children | React.ReactNode | Yes | Content rendered in page header tools | |
className | string | No | Additional classes added to the page header tools. |
PageHeaderToolsGroup
Name | Type | Required | Default | Description |
---|---|---|---|---|
children | React.ReactNode | Yes | Content rendered in the page header tools group | |
className | string | No | Additional 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'; } | No | Visibility at various breakpoints. |
PageHeaderToolsItem
Name | Type | Required | Default | Description |
---|---|---|---|---|
children | React.ReactNode | Yes | Content rendered in page header tools item. | |
className | string | No | Additional classes added to the page header tools item. | |
id | string | No | HTML id of the PageHeaderToolsItem | |
isSelected | boolean | No | True 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'; } | No | Visibility at various breakpoints. |
PageSidebar
Name | Type | Required | Default | Description |
---|---|---|---|---|
className | string | No | '' | Additional classes added to the page sidebar |
isManagedSidebar | boolean | No | If 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 | |
isNavOpen | boolean | No | true | Programmatically manage if the side nav is shown, if isManagedSidebar is set to true in the Page component, this prop is managed |
nav | React.ReactNode | No | Component to render the side navigation (e.g. <Nav /> | |
theme | 'dark' | 'light' | No | 'dark' | Indicates the color scheme of the sidebar |
PageSection
Name | Type | Required | Default | Description |
---|---|---|---|---|
children | React.ReactNode | No | Content rendered inside the section | |
className | string | No | '' | Additional classes added to the section |
hasOverflowScroll | boolean | No | false | Flag indicating if the PageSection has a scrolling overflow |
hasShadowBottom | boolean | No | false | Modifier indicating if PageSection should have a shadow at the bottom |
hasShadowTop | boolean | No | false | Modifier indicating if PageSection should have a shadow at the top |
isFilled | boolean | No | Enables the page section to fill the available vertical space | |
isWidthLimited | boolean | No | false | Limits the width of the section |
padding | { default?: 'padding' | 'noPadding'; sm?: 'padding' | 'noPadding'; md?: 'padding' | 'noPadding'; lg?: 'padding' | 'noPadding'; xl?: 'padding' | 'noPadding'; '2xl'?: 'padding' | 'noPadding'; } | No | Padding at various breakpoints. | |
sticky | 'top' | 'bottom' | No | Modifier indicating if PageSection is sticky to the top or bottom | |
type | 'default' | 'nav' | 'wizard' | No | 'default' | Section type variant |
variant | 'default' | 'light' | 'dark' | 'darker' | No | 'default' | Section background color variant |
PageGroup
Name | Type | Required | Default | Description |
---|---|---|---|---|
children | React.ReactNode | No | Content rendered inside of the PageGroup | |
className | string | No | '' | Additional classes to apply to the PageGroup |
hasOverflowScroll | boolean | No | false | Flag indicating if the PageGroup has a scrolling overflow |
hasShadowBottom | boolean | No | false | Modifier indicating if PageGroup should have a shadow at the bottom |
hasShadowTop | boolean | No | false | Modifier indicating if PageGroup should have a shadow at the top |
sticky | 'top' | 'bottom' | No | Modifier indicating if PageGroup is sticky to the top or bottom |
PageBreadcrumb
Name | Type | Required | Default | Description |
---|---|---|---|---|
children | React.ReactNode | No | Content rendered inside of the PageBreadcrumb | |
className | string | No | '' | Additional classes to apply to the PageBreadcrumb |
hasOverflowScroll | boolean | No | false | Flag indicating if the PageBreadcrumb has a scrolling overflow |
hasShadowBottom | boolean | No | false | Flag indicating if PageBreadcrumb should have a shadow at the bottom |
hasShadowTop | boolean | No | false | Flag indicating if PageBreadcrumb should have a shadow at the top |
isWidthLimited | boolean | No | Limits the width of the breadcrumb | |
sticky | 'top' | 'bottom' | No | Modifier indicating if the PageBreadcrumb is sticky to the top or bottom |
PageNavigation
Name | Type | Required | Default | Description |
---|---|---|---|---|
children | React.ReactNode | No | Content rendered inside of the PageNavigation | |
className | string | No | '' | Additional classes to apply to the PageNavigation |
hasOverflowScroll | boolean | No | false | Flag indicating if the PageNavigation has a scrolling overflow |
hasShadowBottom | boolean | No | false | Flag indicating if PageNavigation should have a shadow at the bottom |
hasShadowTop | boolean | No | false | Flag indicating if PageNavigation should have a shadow at the top |
isWidthLimited | boolean | No | Limits the width of the PageNavigation | |
sticky | 'top' | 'bottom' | No | Modifier indicating if the PageNavigation is sticky to the top or bottom |
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 | #2b9af3 | |
.pf-c-page__header | --pf-global--link--Color--hover | #2b9af3 | |
.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__main-breadcrumb--page__main-tabs--PaddingTop | 1rem | |
.pf-c-page | --pf-c-page__main-nav--page__main-tabs--PaddingTop | 1rem | |
.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-tabs--PaddingTop | 0 | |
.pf-c-page | --pf-c-page__main-tabs--PaddingRight | 0 | |
.pf-c-page | --pf-c-page__main-tabs--PaddingBottom | 0 | |
.pf-c-page | --pf-c-page__main-tabs--PaddingLeft | 0 | |
.pf-c-page | --pf-c-page__main-tabs--BackgroundColor | #fff | |
.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-nav + .pf-c-page__main-tabs | --pf-c-page__main-tabs--PaddingTop | 1rem | |
.pf-c-page__main-breadcrumb + .pf-c-page__main-tabs | --pf-c-page__main-tabs--PaddingTop | 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-wizard:first-child | --pf-c-page__main-wizard--BorderTopWidth | 0 |
View source on GitHub