Page

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

Warning alert:Deprecated feature

This implementation has been deprecated in favor of a newer implementation, and is no longer getting maintained or enhanced. To learn more about the process, visit our about page.

Vertical nav

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

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.

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

Main section padding

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

.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

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

The page header component is a deprecated approach to building a header on the page component. The recommended approach uses the masthead component instead.

Accessibility

Attribute	Applied to	Outcome
`role="banner"`	`.pf-v5-c-page__header`	Identifies the element that serves as the banner region.
`aria-expanded="true/false"`	`.pf-v5-c-page__header-brand-toggle > .pf-v5-c-button`	Indicates that the expandable content is visible and the current state of the contents. Required
`aria-controls="[id of nav]"`	`.pf-v5-c-page__header-brand-toggle > .pf-v5-c-button`	Identifies the element controlled by the toggle. Required

Usage

Class	Applied to	Outcome
`.pf-v5-c-page__header`	`<header>`	Declares the page header.
`.pf-v5-c-page__header-brand`	`<div>`	Creates a header container to nest the brand component.
`.pf-v5-c-page__header-brand-toggle`	`<div>`	Creates a container to nest the sidebar toggle.
`.pf-v5-c-page__header-brand-link`	`<a>`, `<span>`	Creates a link for the brand logo. Use a `<span>` if there is no link.
`.pf-v5-c-page__header-selector`	`<div>`	Creates a header container to nest the context selector component.
`.pf-v5-c-page__header-nav`	`<div>`	Creates a container to nest the navigation component in the header.
`.pf-v5-c-page__header-tools`	`<div>`	Creates a container to nest the icons and menus in header.
`.pf-v5-c-page__header-tools-group`	`<div>`	Creates a container for grouping sets of icons and menus in header.
`.pf-v5-c-page__header-tools-item`	`<div>`	Creates a container for an item in a header tools group.
`.pf-m-selected`	`.pf-v5-c-page__header-tools-item`	Modifies a header tools item to indicate that the button inside is in the selected state.
`.pf-m-hidden{-on-[breakpoint]}`	`.pf-v5-c-page__header-tools-group`, `.pf-v5-c-page__header-tools-item`	Hides a header tools group or item at an optional breakpoint, or hides it at all breakpoints with `.pf-m-hidden`.
`.pf-m-visible{-on-[breakpoint]}`	`.pf-v5-c-page__header-tools-group`, `.pf-v5-c-page__header-tools-item`	Shows a header tools group or item at an optional breakpoint.

View source on GitHub