Summary
Create a <pf-v6-masthead> web component implementing the PatternFly v6 Masthead component.
Application header bar containing logo/branding, navigation toggle, and utility actions.
Prior Art
| Source |
Element |
Status |
| PFE v4 |
-- |
-- |
| cem |
<pf-v6-masthead> |
Exists |
| cockpit |
<pf-v6-masthead> |
Exists |
| chickadee |
<chickadee-masthead> |
Exists |
Requirements
- MUST implement PFv6 visual designs
- MUST provide end-user feature parity with
@patternfly/react-core Masthead
- 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
display prop: inline (logo/toggle side-by-side) vs stack (stacked)
- Sub-elements:
MastheadMain, MastheadBrand, MastheadLogo, MastheadContent, MastheadToggle
- Consider named slots for each region:
toggle, brand, content
- Nav toggle button: needs
aria-label (e.g. "Global navigation"), aria-expanded, aria-controls
- Toggle controls sidebar visibility - coordinate with
pf-v6-page isManagedSidebar
MastheadLogo renders as <a> - slot or href prop
Checklist
Implementation
Demos
Tests
Reviews
Ship
Summary
Create a
<pf-v6-masthead>web component implementing the PatternFly v6 Masthead component.Application header bar containing logo/branding, navigation toggle, and utility actions.
Prior Art
<pf-v6-masthead><pf-v6-masthead><chickadee-masthead>Requirements
@patternfly/react-coreMastheadElement-specific considerations
displayprop:inline(logo/toggle side-by-side) vsstack(stacked)MastheadMain,MastheadBrand,MastheadLogo,MastheadContent,MastheadToggletoggle,brand,contentaria-label(e.g. "Global navigation"),aria-expanded,aria-controlspf-v6-pageisManagedSidebarMastheadLogorenders as<a>- slot orhrefpropChecklist
Implementation
.claude/ADVICE.md@summaryand JSDoc on element classDemos
Tests
a11ySnapshotassertionsReviews
/review-apipasses/review-demospasses/review-a11ypasseseslintandstylelintpassShip
staging/pfv6(NOTmain)