Summary
Create a <pf-v6-page> web component implementing the PatternFly v6 Page component.
Top-level application layout providing masthead, sidebar, and main content areas with responsive behavior.
Prior Art
| Source |
Element |
Status |
| PFE v4 |
-- |
-- |
| cem |
<pf-v6-page> |
Exists |
| cockpit |
<pf-v6-page> |
Exists |
| chickadee |
-- |
-- |
Sub-components
<pf-v6-page-sidebar> - Collapsible sidebar container
<pf-v6-page-section> - Content section within the main area
Requirements
- MUST implement PFv6 visual designs
- MUST provide end-user feature parity with
@patternfly/react-core Page
- MAY adjust element API to leverage web platform strengths
- SHOULD maintain CSS custom property theming compatibility
- SHOULD expose useful CSS shadow parts
Element-specific considerations
isManagedSidebar prop: page controls sidebar open/close state
isNavOpen / defaultNavOpen for sidebar visibility
mainContainerId for skip-to-content link target (coordinate with pf-v6-skip-to-content)
- Named slots:
masthead, sidebar, breadcrumb, notification-drawer, default (main content)
PageSection: variant (default/light/dark/darker), padding, isFilled, isWidthLimited
PageSidebar: isSidebarOpen, theme (light/dark)
- Breadcrumb and notification drawer slot integration
- Main area
<main> element should have id matching mainContainerId
Checklist
Implementation
Demos
Tests
Reviews
Ship
Summary
Create a
<pf-v6-page>web component implementing the PatternFly v6 Page component.Top-level application layout providing masthead, sidebar, and main content areas with responsive behavior.
Prior Art
<pf-v6-page><pf-v6-page>Sub-components
<pf-v6-page-sidebar>- Collapsible sidebar container<pf-v6-page-section>- Content section within the main areaRequirements
@patternfly/react-corePageElement-specific considerations
isManagedSidebarprop: page controls sidebar open/close stateisNavOpen/defaultNavOpenfor sidebar visibilitymainContainerIdfor skip-to-content link target (coordinate withpf-v6-skip-to-content)masthead,sidebar,breadcrumb,notification-drawer, default (main content)PageSection:variant(default/light/dark/darker),padding,isFilled,isWidthLimitedPageSidebar:isSidebarOpen,theme(light/dark)<main>element should haveidmatchingmainContainerIdChecklist
Implementation
.claude/ADVICE.md@summaryand JSDoc on element classDemos
Tests
a11ySnapshotassertionsReviews
/review-apipasses/review-demospasses/review-a11ypasseseslintandstylelintpassShip
staging/pfv6(NOTmain)