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

ExamplesDocumentationCSS Variables

Examples

Vertical nav

toggle
Logo
header-tools
pf-c-nav

Horizontal nav

pf-c-nav
header-tools

With or without fill

pf-c-nav
header-tools
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

toggle
Logo
header-tools
pf-c-nav
This `.pf-c-page__main-section` has default padding.
This `.pf-c-page__main-section` uses `.pf-m-no-padding` to remove all padding.
This `.pf-c-page__main-section` uses `.pf-m-no-padding .pf-m-padding-on-md` to remove padding up to the `md` breakpoint.

Documentation

Overview

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

Accessibility

AttributeApplied toOutcome
role="banner".pf-c-page__headerIdentifies the element that serves as the banner region.
role="main".pf-c-page__mainIdentifies the element that serves as the main region.
tabindex="-1".pf-c-page__mainAllows the main region to receive programmatic focus. Required
id="[id]".pf-c-page__mainProvides a hook for sending focus to new content. Required
aria-expanded="true/false".pf-c-page__header-brand-toggle > .pf-c-buttonIndicates that the expandable content is visible and the current state of the contents. Required
aria-controls="[id of nav]".pf-c-page__header-brand-toggle > .pf-c-buttonIdentifies the element controlled by the toggle. Required

Usage

ClassApplied toOutcome
.pf-c-page<div>Declares the page component.
.pf-c-page__header<header>Declares the page header.
.pf-c-page__header-brand<div>Creates a header container to nest the brand component.
.pf-c-page__header-brand-toggle<div>Creates a container to nest the sidebar toggle.
.pf-c-page__header-brand-link<a>Creates a link for the brand logo.
.pf-c-page__header-selector<div>Creates a header container to nest the context selector component.
.pf-c-page__header-nav<div>Creates a container to nest the navigation component in the header.
.pf-c-page__header-tools<div>Creates a container to nest the icons and menus in header.
.pf-c-page__header-tools-group<div>Creates a container for grouping sets of icons and menus in header.
.pf-c-page__header-tools-item<div>Creates a container for an item in a header tools group.
.pf-c-page__sidebar<aside>Declares the page sidebar.
.pf-c-page__sidebar-body<div>Creates a wrapper within the sidebar to hold content.
.pf-c-page__main<main>Declares the main page area.
.pf-c-page__main-nav<section>Creates a container to nest the navigation component in the main page area.
.pf-c-page__main-breadcrumb<section>Creates a container to nest the breadcrumb component in the main page area.
.pf-c-page__main-section<section>Creates a section container in the main page area. Note: The last/only .pf-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-c-page__drawer<div>Creates a container for the drawer component when placing the main page element in the drawer body.
.pf-m-selected.pf-c-page__header-tools-itemModifies a header tools item to indicate that the button inside is in the selected state.
.pf-m-expanded.pf-c-page__sidebarModifies the sidebar for the expanded state.
.pf-m-collapsed.pf-c-page__sidebarModifies the sidebar for the collapsed state.
.pf-m-light.pf-c-page__sidebarModifies the sidebar the light variation. Note: for use with a light themed nav component
.pf-m-light.pf-c-page__main-sectionModifies a main page section to have a light theme.
.pf-m-dark-200.pf-c-page__main-sectionModifies a main page section to have a dark theme and a dark transparent background.
.pf-m-dark-100.pf-c-page__main-sectionModifies a main page section to have a dark theme and a darker transparent background.
.pf-m-no-padding, .pf-m-no-padding{-on-[breakpoint]}.pf-c-page__main-sectionRemoves padding from the main page section at an optional breakpoint
.pf-m-padding{-on-[breakpoint]}.pf-c-page__main-sectionModifies the main page section to add padding back in at a specified breakpoint. Should be used with pf-m-no-padding.
.pf-m-fill.pf-c-page__main-sectionModifies a main page section to grow to fill the available vertical space.
.pf-m-no-fill.pf-c-page__main-sectionModifies a main page section to not grow to fill the available vertical space.
.pf-m-hidden{-on-[breakpoint]}.pf-c-page__header-tools-group, .pf-c-page__header-tools-itemHides a header tools group or item at a specified breakpoint, or hides it at all breakpoints with .pf-m-hidden.
.pf-m-visible{-on-[breakpoint]}.pf-c-page__header-tools-group, .pf-c-page__header-tools-itemShows a header tools group or item at a specified breakpoint.

CSS Variables

.pf-c-page__sidebar.pf-m-light--pf-global--Color--100global_Color_100
#151515
.pf-c-page__sidebar.pf-m-light--pf-global--Color--200global_Color_200
#6a6e73
.pf-c-page__sidebar.pf-m-light--pf-global--BorderColor--100global_BorderColor_100
#d2d2d2
.pf-c-page__sidebar.pf-m-light--pf-global--primary-color--100global_primary_color_100
#06c
.pf-c-page__sidebar.pf-m-light--pf-global--link--Colorglobal_link_Color
#06c
.pf-c-page__sidebar.pf-m-light--pf-global--link--Color--hoverglobal_link_Color_hover
#004080
.pf-c-page__sidebar.pf-m-light--pf-global--BackgroundColor--100global_BackgroundColor_100
#fff
.pf-c-page__sidebar.pf-m-light--pf-c-page__sidebar--BackgroundColorc_page__sidebar_BackgroundColor
#fff
.pf-c-page__header--pf-global--Color--100global_Color_100
#fff
.pf-c-page__header--pf-global--Color--200global_Color_200
#f0f0f0
.pf-c-page__header--pf-global--BorderColor--100global_BorderColor_100
#b8bbbe
.pf-c-page__header--pf-global--primary-color--100global_primary_color_100
#73bcf7
.pf-c-page__header--pf-global--link--Colorglobal_link_Color
#73bcf7
.pf-c-page__header--pf-global--link--Color--hoverglobal_link_Color_hover
#73bcf7
.pf-c-page__header--pf-global--BackgroundColor--100global_BackgroundColor_100
#151515
.pf-c-page__header .pf-c-card--pf-c-card--BackgroundColorc_card_BackgroundColor
rgba(#030303, .32)
.pf-c-page__header .pf-c-button--pf-c-button--m-primary--Colorc_button_m_primary_Color
#06c
.pf-c-page__header .pf-c-button--pf-c-button--m-primary--hover--Colorc_button_m_primary_hover_Color
#06c
.pf-c-page__header .pf-c-button--pf-c-button--m-primary--focus--Colorc_button_m_primary_focus_Color
#06c
.pf-c-page__header .pf-c-button--pf-c-button--m-primary--active--Colorc_button_m_primary_active_Color
#06c
.pf-c-page__header .pf-c-button--pf-c-button--m-primary--BackgroundColorc_button_m_primary_BackgroundColor
#fff
.pf-c-page__header .pf-c-button--pf-c-button--m-primary--hover--BackgroundColorc_button_m_primary_hover_BackgroundColor
#f0f0f0
.pf-c-page__header .pf-c-button--pf-c-button--m-primary--focus--BackgroundColorc_button_m_primary_focus_BackgroundColor
#f0f0f0
.pf-c-page__header .pf-c-button--pf-c-button--m-primary--active--BackgroundColorc_button_m_primary_active_BackgroundColor
#f0f0f0
.pf-c-page__header .pf-c-button--pf-c-button--m-secondary--Colorc_button_m_secondary_Color
#fff
.pf-c-page__header .pf-c-button--pf-c-button--m-secondary--hover--Colorc_button_m_secondary_hover_Color
#fff
.pf-c-page__header .pf-c-button--pf-c-button--m-secondary--focus--Colorc_button_m_secondary_focus_Color
#fff
.pf-c-page__header .pf-c-button--pf-c-button--m-secondary--active--Colorc_button_m_secondary_active_Color
#fff
.pf-c-page__header .pf-c-button--pf-c-button--m-secondary--BorderColorc_button_m_secondary_BorderColor
#fff
.pf-c-page__header .pf-c-button--pf-c-button--m-secondary--hover--BorderColorc_button_m_secondary_hover_BorderColor
#fff
.pf-c-page__header .pf-c-button--pf-c-button--m-secondary--focus--BorderColorc_button_m_secondary_focus_BorderColor
#fff
.pf-c-page__header .pf-c-button--pf-c-button--m-secondary--active--BorderColorc_button_m_secondary_active_BorderColor
#fff
.pf-c-page__header-tools-group--pf-hidden-visible--visible--Visibilityhidden_visible_visible_Visibility
visible
.pf-c-page__header-tools-group--pf-hidden-visible--hidden--Displayhidden_visible_hidden_Display
none
.pf-c-page__header-tools-group--pf-hidden-visible--hidden--Visibilityhidden_visible_hidden_Visibility
hidden
.pf-c-page__header-tools-group--pf-hidden-visible--Displayhidden_visible_Display
flex
.pf-c-page__header-tools-group--pf-hidden-visible--Visibilityhidden_visible_Visibility
visible
.pf-c-page__header-tools-group--pf-hidden-visible--visible--Displayhidden_visible_visible_Display
flex
.pf-m-hidden.pf-c-page__header-tools-group--pf-hidden-visible--Displayhidden_visible_Display
none
.pf-m-hidden.pf-c-page__header-tools-group--pf-hidden-visible--Visibilityhidden_visible_Visibility
hidden
.pf-c-page--pf-c-page--BackgroundColorc_page_BackgroundColor
#f0f0f0
.pf-c-page--pf-c-page__header--BackgroundColorc_page__header_BackgroundColor
#151515
.pf-c-page--pf-c-page__header--ZIndexc_page__header_ZIndex
300
.pf-c-page--pf-c-page__header--MinHeightc_page__header_MinHeight
4.75rem
.pf-c-page--pf-c-page__header-brand--PaddingLeftc_page__header_brand_PaddingLeft
1rem
.pf-c-page--pf-c-page__header-brand--xl--PaddingRightc_page__header_brand_xl_PaddingRight
2rem
.pf-c-page--pf-c-page__header-brand--xl--PaddingLeftc_page__header_brand_xl_PaddingLeft
1.5rem
.pf-c-page--pf-c-page__header-sidebar-toggle__c-button--PaddingTopc_page__header_sidebar_toggle__c_button_PaddingTop
0.5rem
.pf-c-page--pf-c-page__header-sidebar-toggle__c-button--PaddingRightc_page__header_sidebar_toggle__c_button_PaddingRight
0.5rem
.pf-c-page--pf-c-page__header-sidebar-toggle__c-button--PaddingBottomc_page__header_sidebar_toggle__c_button_PaddingBottom
0.5rem
.pf-c-page--pf-c-page__header-sidebar-toggle__c-button--PaddingLeftc_page__header_sidebar_toggle__c_button_PaddingLeft
0.5rem
.pf-c-page--pf-c-page__header-sidebar-toggle__c-button--MarginRightc_page__header_sidebar_toggle__c_button_MarginRight
1rem
.pf-c-page--pf-c-page__header-sidebar-toggle__c-button--MarginLeftc_page__header_sidebar_toggle__c_button_MarginLeft
calc(0.5rem * -1)
.pf-c-page--pf-c-page__header-sidebar-toggle__c-button--FontSizec_page__header_sidebar_toggle__c_button_FontSize
1.5rem
.pf-c-page--pf-c-page__header-brand-link--c-brand--MaxHeightc_page__header_brand_link_c_brand_MaxHeight
3.75rem
.pf-c-page--pf-c-page__header-nav--BackgroundColorc_page__header_nav_BackgroundColor
#212427
.pf-c-page--pf-c-page__header-nav--xl--BackgroundColorc_page__header_nav_xl_BackgroundColor
transparent
.pf-c-page--pf-c-page__header-nav--xl--PaddingRightc_page__header_nav_xl_PaddingRight
2rem
.pf-c-page--pf-c-page__header-nav--xl--PaddingLeftc_page__header_nav_xl_PaddingLeft
2rem
.pf-c-page--pf-c-page__header-tools--MarginRightc_page__header_tools_MarginRight
1rem
.pf-c-page--pf-c-page__header-tools--xl--MarginRightc_page__header_tools_xl_MarginRight
1.5rem
.pf-c-page--pf-c-page__header-tools--c-avatar--MarginLeftc_page__header_tools_c_avatar_MarginLeft
1rem
.pf-c-page--pf-c-page__header-tools-group--MarginLeftc_page__header_tools_group_MarginLeft
2rem
.pf-c-page--pf-c-page__header-tools-group--Displayc_page__header_tools_group_Display
flex
.pf-c-page--pf-c-page__header-tools-item--Displayc_page__header_tools_item_Display
block
.pf-c-page--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--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--pf-c-page__header-tools--c-button--m-selected--before--BackgroundColorc_page__header_tools_c_button_m_selected_before_BackgroundColor
#3c3f42
.pf-c-page--pf-c-page__header-tools--c-button--m-selected--before--BorderRadiusc_page__header_tools_c_button_m_selected_before_BorderRadius
30em
.pf-c-page--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--pf-c-page__sidebar--ZIndexc_page__sidebar_ZIndex
200
.pf-c-page--pf-c-page__sidebar--Widthc_page__sidebar_Width
18.125rem
.pf-c-page--pf-c-page__sidebar--BackgroundColorc_page__sidebar_BackgroundColor
#212427
.pf-c-page--pf-c-page__sidebar--m-light--BackgroundColorc_page__sidebar_m_light_BackgroundColor
#fff
.pf-c-page--pf-c-page__sidebar--BoxShadowc_page__sidebar_BoxShadow
0.75rem 0 0.75rem -0.5rem rgba(3, 3, 3, 0.18)
.pf-c-page--pf-c-page__sidebar--Transitionc_page__sidebar_Transition
all 250ms cubic-bezier(.42, 0, .58, 1)
.pf-c-page--pf-c-page__sidebar--TranslateXc_page__sidebar_TranslateX
-100%
.pf-c-page--pf-c-page__sidebar--TranslateZc_page__sidebar_TranslateZ
0
.pf-c-page--pf-c-page__sidebar--m-expanded--TranslateXc_page__sidebar_m_expanded_TranslateX
0
.pf-c-page--pf-c-page__sidebar--xl--TranslateXc_page__sidebar_xl_TranslateX
0
.pf-c-page--pf-c-page__sidebar-body--PaddingTopc_page__sidebar_body_PaddingTop
0.5rem
.pf-c-page--pf-c-page__sidebar-body--PaddingBottomc_page__sidebar_body_PaddingBottom
1rem
.pf-c-page--pf-c-page__main-section--PaddingTopc_page__main_section_PaddingTop
1rem
.pf-c-page--pf-c-page__main-section--PaddingRightc_page__main_section_PaddingRight
1rem
.pf-c-page--pf-c-page__main-section--PaddingBottomc_page__main_section_PaddingBottom
1rem
.pf-c-page--pf-c-page__main-section--PaddingLeftc_page__main_section_PaddingLeft
1rem
.pf-c-page--pf-c-page__main-section--xl--PaddingTopc_page__main_section_xl_PaddingTop
1.5rem
.pf-c-page--pf-c-page__main-section--xl--PaddingRightc_page__main_section_xl_PaddingRight
1.5rem
.pf-c-page--pf-c-page__main-section--xl--PaddingBottomc_page__main_section_xl_PaddingBottom
1.5rem
.pf-c-page--pf-c-page__main-section--xl--PaddingLeftc_page__main_section_xl_PaddingLeft
1.5rem
.pf-c-page--pf-c-page__main-section--BackgroundColorc_page__main_section_BackgroundColor
#f0f0f0
.pf-c-page--pf-c-page__main--ZIndexc_page__main_ZIndex
100
.pf-c-page--pf-c-page__main-breadcrumb--main-section--PaddingTopc_page__main_breadcrumb_main_section_PaddingTop
1rem
.pf-c-page--pf-c-page__main-nav--BackgroundColorc_page__main_nav_BackgroundColor
#fff
.pf-c-page--pf-c-page__main-nav--PaddingTopc_page__main_nav_PaddingTop
1rem
.pf-c-page--pf-c-page__main-nav--PaddingRightc_page__main_nav_PaddingRight
0
.pf-c-page--pf-c-page__main-nav--PaddingLeftc_page__main_nav_PaddingLeft
0
.pf-c-page--pf-c-page__main-nav--xl--PaddingRightc_page__main_nav_xl_PaddingRight
0.5rem
.pf-c-page--pf-c-page__main-nav--xl--PaddingLeftc_page__main_nav_xl_PaddingLeft
0.5rem
.pf-c-page--pf-c-page__main-breadcrumb--BackgroundColorc_page__main_breadcrumb_BackgroundColor
#fff
.pf-c-page--pf-c-page__main-breadcrumb--PaddingTopc_page__main_breadcrumb_PaddingTop
1rem
.pf-c-page--pf-c-page__main-breadcrumb--PaddingRightc_page__main_breadcrumb_PaddingRight
1rem
.pf-c-page--pf-c-page__main-breadcrumb--PaddingBottomc_page__main_breadcrumb_PaddingBottom
0
.pf-c-page--pf-c-page__main-breadcrumb--PaddingLeftc_page__main_breadcrumb_PaddingLeft
1rem
.pf-c-page--pf-c-page__main-breadcrumb--xl--PaddingRightc_page__main_breadcrumb_xl_PaddingRight
1.5rem
.pf-c-page--pf-c-page__main-breadcrumb--xl--PaddingLeftc_page__main_breadcrumb_xl_PaddingLeft
1.5rem
.pf-c-page--pf-c-page__main-section--m-light--BackgroundColorc_page__main_section_m_light_BackgroundColor
#fff
.pf-c-page--pf-c-page__main-section--m-dark-100--BackgroundColorc_page__main_section_m_dark_100_BackgroundColor
rgba(#030303, .62)
.pf-c-page--pf-c-page__main-section--m-dark-200--BackgroundColorc_page__main_section_m_dark_200_BackgroundColor
rgba(#030303, .32)
.pf-c-page--pf-c-page__main-wizard--BorderTopColorc_page__main_wizard_BorderTopColor
#d2d2d2
.pf-c-page--pf-c-page__main-wizard--BorderTopWidthc_page__main_wizard_BorderTopWidth
1px
.pf-c-page__header-tools-item--pf-hidden-visible--visible--Displayhidden_visible_visible_Display
block
.pf-c-page__sidebar.pf-m-expanded--pf-c-page__sidebar--TranslateXc_page__sidebar_TranslateX
0
.pf-c-page__main-breadcrumb + .pf-c-page__main-section--pf-c-page__main-section--PaddingTopc_page__main_section_PaddingTop
1rem
.pf-c-page__main-section.pf-m-light--pf-c-page__main-section--BackgroundColorc_page__main_section_BackgroundColor
#fff
.pf-c-page__main-section.pf-m-dark-100--pf-c-page__main-section--BackgroundColorc_page__main_section_BackgroundColor
rgba(#030303, .62)
.pf-c-page__main-section.pf-m-dark-200--pf-c-page__main-section--BackgroundColorc_page__main_section_BackgroundColor
rgba(#030303, .32)