Skip to content
PatternFly

Page

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

Examples

Vertical nav

Logo
Content
Navigation
This .pf-v5-c-page__main-section uses .pf-m-dark-100.
This .pf-v5-c-page__main-section uses .pf-m-dark-200.
This .pf-v5-c-page__main-section uses .pf-m-light.
This is a default .pf-v5-c-page__main-section.

Horizontal nav

Logo
Content

Multiple sidebar body elements, padding, and fill

Logo
Content
Navigation
inset content
footer content

With or without fill

Logo
Content
A regular page section.
This section uses .pf-m-fill to fill the available space.
This section uses .pf-m-no-fill to not fill the available space.

Main section padding

Logo
Content
Navigation
This .pf-v5-c-page__main-section has default padding.
This .pf-v5-c-page__main-section uses .pf-m-no-padding to remove all padding.
This .pf-v5-c-page__main-section uses .pf-m-no-padding .pf-m-padding-on-md to remove padding up to the md breakpoint.

Main section variations

Logo
Content
Navigation
.pf-v5-c-page__main-subnav for horizontal subnav navigation
.pf-v5-c-page__main-nav for tertiary navigation
.pf-v5-c-page__main-tabs for tabs
.pf-v5-c-page__main-group for a group of page sections
.pf-v5-c-page__main-breadcrumb for breadcrumbs
.pf-v5-c-page__main-section for main sections
.pf-v5-c-page__main-wizard for wizards

Centered section

Logo
Content
When a width limited page section is wider than the value of --pf-v5-c-page--section--m-limit-width--MaxWidth, the section will be centered in the main section.

The content in this example is placed in a card to better illustrate how the section behaves when it is centered. A card is not required to center a page section.

Documentation

Overview

This component provides the basic chrome for a page, including sidebar and main areas.

Accessibility

Attribute
Applied to
Outcome
role="main"
.pf-v5-c-page__main
Identifies the element that serves as the main region.
tabindex="-1"
.pf-v5-c-page__main
Allows the main region to receive programmatic focus. Required
id="[id]"
.pf-v5-c-page__main
Provides a hook for sending focus to new content. Required
tabindex="0"
.pf-v5-c-page__main-section.pf-m-overflow-scroll
If a page section has overflow content that triggers a scrollbar, to ensure that the content is keyboard accessible, the page section must include either a focusable element within the scrollable region or the page section itself must be focusable by adding tabindex="0".

Usage

Class
Applied to
Outcome
.pf-v5-c-page
<div>
Declares the page component.
.pf-v5-c-page__sidebar
<aside>
Declares the page sidebar.
.pf-v5-c-page__sidebar-body
<div>
Creates a wrapper within the sidebar to hold content. Note: The last/only .pf-v5-c-page__sidebar-body element will grow to fill the availble vertical space. You can change this behavior using .pf-m-fill and .pf-m-no-fill, which are documented below.
.pf-v5-c-page__main
<main>
Declares the main page area.
.pf-v5-c-page__main-nav
<section>
Creates a container to nest the navigation component in the main page area.
.pf-v5-c-page__main-breadcrumb
<section>
Creates a container to nest the breadcrumb component in the main page area.
.pf-v5-c-page__main-section
<section>
Creates a section container in the main page area. Note: The last/only .pf-v5-c-page__main-section element will grow to fill the availble vertical space. You can change this behavior using .pf-m-fill and .pf-m-no-fill, which are documented below.
.pf-v5-c-page__main-tabs
<section>
Creates a container to nest the tabs component in the main page area.
.pf-v5-c-page__main-wizard
<section>
Creates a container to nest the wizard component in the main page area.
.pf-v5-c-page__main-body
<div>
Creates the body section for a page section. Required when using .pf-m-limit-width on .pf-v5-c-page__main-section
.pf-v5-c-page__main-group
<div>
Creates the group of .pf-v5-c-page__main-* sections. Can be used in combination with .pf-m-sticky-[top/bottom] to make multiple sections sticky.
.pf-v5-c-page__drawer
<div>
Creates a container for the drawer component when placing the main page element in the drawer body.
.pf-m-expanded
.pf-v5-c-page__sidebar
Modifies the sidebar for the expanded state.
.pf-m-collapsed
.pf-v5-c-page__sidebar
Modifies the sidebar for the collapsed state.
.pf-m-page-insets
.pf-v5-c-page__sidebar-body
Modifies a sidebar body padding/inset to visually match padding of page elements.
.pf-m-inset-none
.pf-v5-c-page__sidebar-body
Removes a sidebar body left/right inset.
.pf-m-light
.pf-v5-c-page__sidebar
Modifies the sidebar the light variation. Note: for use with a light themed nav component
.pf-m-light
.pf-v5-c-page__main-section
Modifies a main page section to have a light theme.
.pf-m-dark-200
.pf-v5-c-page__main-section
Modifies a main page section to have a dark theme and a dark transparent background.
.pf-m-dark-100
.pf-v5-c-page__main-section
Modifies a main page section to have a dark theme and a darker transparent background.
.pf-m-light-200
.pf-v5-c-page__main-wizard
Modifies a wizard page section to have a light 200 theme.
.pf-m-padding{-on-[breakpoint]}
.pf-v5-c-page__main-section
Modifies the main page section to add padding back in at an optional breakpoint. Should be used with pf-m-no-padding.
.pf-m-no-padding{-on-[breakpoint]}
.pf-v5-c-page__main-section
Removes padding from the main page section at an optional breakpoint.
.pf-m-fill
.pf-v5-c-page__main-section, .pf-v5-c-page__sidebar-body
Modifies the element to grow to fill the available space.
.pf-m-no-fill
.pf-v5-c-page__main-section, .pf-v5-c-page__sidebar-body
Modifies the element to not grow to fill the available vertical space.
.pf-m-limit-width
.pf-v5-c-page__main-section
Modifies a page section to limit the max-width of the content inside.
.pf-m-align-center
.pf-v5-c-page__main-section.pf-m-limit-width
Modifies a page section body to align center.
.pf-m-sticky-top{-on-[breakpoint]-height}
.pf-v5-c-page__main-*
Modifies a section/group to be sticky to the top of its container at an optional height breakpoint.
.pf-m-sticky-bottom{-on-[breakpoint]-height}
.pf-v5-c-page__main-*
Modifies a section/group to be sticky to the bottom of its container at an optional height breakpoint.
.pf-m-shadow-bottom
.pf-v5-c-page__main-*
Modifies a section/group to have a bottom shadow.
.pf-m-shadow-top
.pf-v5-c-page__main-*
Modifies a section/group to have a top shadow.
.pf-m-overflow-scroll
.pf-v5-c-page__main-*
Modifies a section/group to show a scrollbar if it has overflow content.

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