--- id: Page section: components cssPrefix: pf-c-page wrapperTag: div ---## Examples ### Vertical nav ```html

``` ### Horizontal nav ```html

``` ### With or without fill ```html

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 ```html

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.

``` ### Main section variations ```html

`.pf-c-page__main-nav` for tertiary navigation

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

`.pf-c-page__main-tabs` for tabs

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

``` ### Centered section ```html

When a width limited page section is wider than the value of --pf-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, header, and main areas. To make the page component take up the full height of the viewport, it is recommended to add `height: 100%;` to all ancestor elements of the page component. ### Accessibility | Attribute | Applied to | Outcome | | ----------------------------- | ------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `role="banner"` | `.pf-c-page__header` | Identifies the element that serves as the banner region. | | `role="main"` | `.pf-c-page__main` | Identifies the element that serves as the main region. | | `tabindex="-1"` | `.pf-c-page__main` | Allows the main region to receive programmatic focus. **Required** | | `id="[id]"` | `.pf-c-page__main` | Provides a hook for sending focus to new content. **Required** | | `aria-expanded="true/false"` | `.pf-c-page__header-brand-toggle > .pf-c-button` | Indicates 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-button` | Identifies the element controlled by the toggle. **Required** | | `tabindex="0"` | `.pf-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-c-page` | `

` | Declares the page component. | | `.pf-c-page__header` | `

` | Declares the page header. | | `.pf-c-page__header-brand` | `

` | Creates a header container to nest the brand component. | | `.pf-c-page__header-brand-toggle` | `

` | Creates a container to nest the sidebar toggle. | | `.pf-c-page__header-brand-link` | ``, `` | Creates a link for the brand logo. Use a `` if there is no link. | | `.pf-c-page__header-selector` | `

` | Creates a header container to nest the context selector component. | | `.pf-c-page__header-nav` | `

` | Creates a container to nest the navigation component in the header. | | `.pf-c-page__header-tools` | `

` | Creates a container to nest the icons and menus in header. | | `.pf-c-page__header-tools-group` | `

` | Creates a container for grouping sets of icons and menus in header. | | `.pf-c-page__header-tools-item` | `

` | Creates a container for an item in a header tools group. | | `.pf-c-page__sidebar` | `

` | Declares the page sidebar. | | `.pf-c-page__sidebar-body` | `

` | Creates a wrapper within the sidebar to hold content. | | `.pf-c-page__main` | `

` | Declares the main page area. | | `.pf-c-page__main-nav` | `

` | Creates a container to nest the navigation component in the main page area. | | `.pf-c-page__main-breadcrumb` | `

` | Creates a container to nest the breadcrumb component in the main page area. | | `.pf-c-page__main-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__main-tabs` | `

` | Creates a container to nest the tabs component in the main page area. | | `.pf-c-page__main-wizard` | `

` | Creates a container to nest the wizard component in the main page area. | | `.pf-c-page__main-body` | `

` | Creates the body section for a page section. **Required when using `.pf-m-limit-width` on `.pf-c-page__main-section`** | | `.pf-c-page__main-group` | `

` | Creates the group of `.pf-c-page__main-*` sections. Can be used in combination with `.pf-m-sticky-[top/bottom]` to make multiple sections sticky. | | `.pf-c-page__drawer` | `