Page

A page component defines the basic layout of a page, with either vertical or horizontal navigation.

Examples

Vertical nav

This is a default .pf-v6-c-page__main-section.

This .pf-v6-c-page__main-section uses .pf-m-secondary.

This is a default .pf-v6-c-page__main-section.

This is a page__main-body, one of three within one page__main-section.

Horizontal nav

This is a default .pf-v6-c-page__main-section.

This .pf-v6-c-page__main-section uses .pf-m-secondary.

This is a default .pf-v6-c-page__main-section.

Multiple sidebar body elements, padding, and fill

With or without fill

A regular page section.

This section uses .pf-m-fill to fill the available space. The .pf-v6-c-page__main-container must also have .pf-m-fill in order for the section to have space to stretch to full height.

This section uses .pf-m-no-fill and will not fill the available space.

Main section padding

This .pf-v6-c-page__main-section has default padding.

This .pf-v6-c-page__main-section uses .pf-m-no-padding to remove all padding.

This .pf-v6-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

.pf-v6-c-page__main-subnav for horizontal subnav navigation

.pf-v6-c-page__main-tabs for tabs

.pf-v6-c-page__main-group for a group of page sections

.pf-v6-c-page__main-breadcrumb for breadcrumbs

.pf-v6-c-page__main-section for main sections

.pf-v6-c-page__main-wizard for wizards

Centered section

When a width limited page section is wider than the value of --pf-v6-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.

With dock

This is a default .pf-v6-c-page__main-section.

Sticky section dynamic

This .pf-v6-c-page__main-group uses .pf-m-sticky-top-base and .pf-m-sticky-top-stuck for dynamic sticky positioning with a fade-in background and shadow.

Content below the sticky 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-v6-c-page__main`	Identifies the element that serves as the main region.
`tabindex="-1"`	`.pf-v6-c-page__main`	Allows the main region to receive programmatic focus. Required
`id="[id]"`	`.pf-v6-c-page__main`	Provides a hook for sending focus to new content. Required
`tabindex="0"`	`.pf-v6-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-v6-c-page`	`<div>`	Declares the page component.
`.pf-v6-c-page__sidebar`	`<aside>`	Declares the page sidebar.
`.pf-v6-c-page__sidebar-body`	`<div>`	Creates a wrapper within the sidebar to hold content. Note: The last/only `.pf-v6-c-page__sidebar-body` element will grow to fill the available vertical space. You can change this behavior using `.pf-m-fill` and `.pf-m-no-fill`, which are documented below.
`.pf-v6-c-page__main`	`<main>`	Declares the main page area.
`.pf-v6-c-page__main-subnav`	`<section>`	Creates a container to nest the horizontal subnav navigation component in the main page area.
`.pf-v6-c-page__main-breadcrumb`	`<section>`	Creates a container to nest the breadcrumb component in the main page area.
`.pf-v6-c-page__main-section`	`<section>`	Creates a section container in the main page area. Note: This section will not fill the vertical space. You can change this behavior using `.pf-m-fill` and `.pf-m-no-fill`, which are documented below.
`.pf-v6-c-page__main-tabs`	`<section>`	Creates a container to nest the tabs component in the main page area.
`.pf-v6-c-page__main-wizard`	`<section>`	Creates a container to nest the wizard component in the main page area.
`.pf-v6-c-page__main-body`	`<div>`	Creates the body section for a page section. Required
`.pf-v6-c-page__main-group`	`<div>`	Creates the group of `.pf-v6-c-page__main-*` sections. Can be used in combination with `.pf-m-sticky-[top/bottom]` to make multiple sections sticky.
`.pf-v6-c-page__drawer`	`<div>`	Creates a container for the drawer component when placing the main page element in the drawer body.
`.pf-m-docked`	`.pf-v6-c-page`	Modifies the page grid to have a dock.
`.pf-m-no-sidebar`	`.pf-v6-c-page`	Modifies the page grid for layouts without a sidebar.
`.pf-m-expanded`	`.pf-v6-c-page__sidebar`	Modifies the sidebar for the expanded state.
`.pf-m-collapsed`	`.pf-v6-c-page__sidebar`	Modifies the sidebar for the collapsed state.
`.pf-m-page-insets`	`.pf-v6-c-page__sidebar-body`	Modifies a sidebar body padding/inset to visually match padding of page elements.
`.pf-m-context-selector`	`.pf-v6-c-page__sidebar-body`	Modifies a sidebar body to contain a context selector.
`.pf-m-inset-none`	`.pf-v6-c-page__sidebar-body`	Removes a sidebar body left/right inset.
`.pf-m-padding{-on-[breakpoint]}`	`.pf-v6-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-v6-c-page__main-section`	Removes padding from the main page section at an optional breakpoint.
`.pf-m-fill`	`.pf-v6-c-page__main-container`, `.pf-v6-c-page__main-section`, `.pf-v6-c-page__main-group`, `.pf-v6-c-page__main-wizard`, `.pf-v6-c-page__sidebar-body`	Modifies the element to grow to fill the available space. Note that `.pf-v6-c-page__main-container` must also have `.pf-m-fill` applied in order for the section to have space to stretch to full height.
`.pf-m-no-fill`	`.pf-v6-c-page__main-section`, `.pf-v6-c-page__main-group`, `.pf-v6-c-page__main-wizard`, `.pf-v6-c-page__sidebar-body`	Modifies the element not to grow to fill the available vertical space.
`.pf-m-plain`	`.pf-v6-c-page__main-section`, `.pf-v6-c-page__main-group`, `.pf-v6-c-page__main-wizard`, `.pf-v6-c-page__main-breadcrumb`, `.pf-v6-c-page__main-subnav`, and `.pf-v6-c-page__main-tabs`	Applies plain styling to the section.
`.pf-m-no-plain-on-glass`	`.pf-v6-c-page__main-section`, `.pf-v6-c-page__main-group`, `.pf-v6-c-page__main-wizard`, `.pf-v6-c-page__main-breadcrumb`, `.pf-v6-c-page__main-subnav`, and `.pf-v6-c-page__main-tabs`	Prevents the section from automatically applying plain styling when glass theme is enabled.
`.pf-m-limit-width`	`.pf-v6-c-page__main-section`	Modifies a page section to limit the `max-width` of the content inside.
`.pf-m-align-center`	`.pf-v6-c-page__main-section.pf-m-limit-width`	Modifies a page section body to align center.
`.pf-m-sticky-top{-on-[breakpoint]-height}`	`.pf-v6-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-v6-c-page__main-*`	Modifies a section/group to be sticky to the bottom of its container at an optional height breakpoint.
`.pf-m-sticky-top-base`	`.pf-v6-c-page__main-*`	Sets up dynamic sticky top positioning with no background or shadow. Used with `.pf-m-sticky-top-stuck`.
`.pf-m-sticky-top-stuck`	`.pf-v6-c-page__main-*`	Triggers the sticky top stuck state, fading in the background and shadow. Apply via JS when the section becomes stuck.
`.pf-m-sticky-bottom-base`	`.pf-v6-c-page__main-*`	Sets up dynamic sticky bottom positioning with no background or shadow. Used with `.pf-m-sticky-bottom-stuck`.
`.pf-m-sticky-bottom-stuck`	`.pf-v6-c-page__main-*`	Triggers the sticky bottom stuck state, fading in the background and shadow. Apply via JS when the section becomes stuck.
`.pf-m-shadow-bottom`	`.pf-v6-c-page__main-*`	Modifies a section/group to have a bottom shadow.
`.pf-m-shadow-top`	`.pf-v6-c-page__main-*`	Modifies a section/group to have a top shadow.
`.pf-m-overflow-scroll`	`.pf-v6-c-page__main-*`	Modifies a section/group to show a scrollbar if it has overflow content.

Edit this page on GitHub