Summary
Create `` to implement the PatternFly v6 Navigation component.
Application sidebar or horizontal navigation with support for grouped items, expandable sections, and flyout menus.
Prior Art
| Source |
Element |
Status |
| PFE v4 |
-- |
-- |
| cem |
`` |
Exists |
| cockpit |
`` |
Exists |
| chickadee |
`` |
Exists |
Sub-components
- `` - Individual navigation link
- `` - Grouped navigation items with title
- `` - Expandable section within navigation
Requirements
- MUST implement PFv6 visual designs
- MUST provide end-user feature parity with `@patternfly/react-core` Nav
- 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
- React `variant`: `default`, `horizontal`, `tertiary`, `horizontal-subnav` - map to `variant` attribute
- React `isScrollable` - vertical nav with scroll; map to `scrollable` attribute
- React `aria-label` - required for `` landmark (e.g. "Global navigation")
- `NavItem`: `to` (href), `isActive`, `component`, `icon`, `flyoutMenu` (for flyout menus)
- `NavGroup`: `title`, `id`, `aria-label`
- `NavExpandable`: toggle for sub-nav; isExpanded, defaultExpanded, onExpand; contains `NavList`
- Flyout menus: `NavItem flyoutMenu` - opens a `` on hover/arrow key; needs Floating UI
- Active item: `aria-current="page"` on the active `NavItem` link
- Wraps in `` element for landmark
Checklist
Implementation
Demos
Tests
Reviews
Ship
Summary
Create `` to implement the PatternFly v6 Navigation component.
Application sidebar or horizontal navigation with support for grouped items, expandable sections, and flyout menus.
Prior Art
Sub-components
Requirements
Element-specific considerations
Checklist
Implementation
Demos
Tests
Reviews
Ship