[aries-core] NavMenu - Added ability to support grouping child NavItems with subheadings by halocline · Pull Request #5700 · grommet/hpe-design-system

halocline · 2026-01-16T21:46:49Z

What does this PR do?

This pull request introduces support for grouped navigation items in the NavigationMenu component, enhancing both its structure and accessibility. It adds new components for rendering group headers and containers, updates the navigation item data model, and includes comprehensive documentation and tests for the new grouping feature.

Grouped Navigation Support:

Added a new type?: 'group' | 'item' property to NavItemType to distinguish between standard items and group containers, enabling hierarchical grouping in navigation menus. [1] [2]
Implemented the NavGroup and GroupHeading components to render group containers and accessible group headers, including proper ARIA roles and levels for improved accessibility. [1] [2] [3]
Updated NavList to recognize and render grouped navigation structures, ensuring correct indentation, focus management, and parent/child relationships. [1] [2] [3] [4] [5] [6] [7] [8]

Documentation and Accessibility:

Expanded the documentation with examples and ARIA guidance for grouped navigation menus, including sample usage and accessibility best practices. [1] [2]
Improved accessibility by adding ARIA roles (group, heading, aria-labelledby) to group containers and headers. [1] [2] [3]

Testing and Storybook Integration:

Added comprehensive tests for grouped navigation, verifying correct rendering, accessibility, and user interaction with group headers and children.
Introduced a NavigationPanel story to demonstrate grouped navigation in different layouts, including mobile responsiveness. [1] [2]

Other Improvements:

Enhanced ItemLabel to support dynamic color changes based on item state (hover, focus, active). [1] [2] [3]
Minor import and refactoring updates to support the new features and maintain code consistency. [1] [2]

These changes collectively make the navigation menu more flexible, accessible, and easier to use in complex UI scenarios.

What are the relevant issues?

Where should the reviewer start?

How should this be manually tested?

Any background context you want to provide?

Screenshots (if appropriate)

Should this PR be mentioned in Design System updates?

Is this change backwards compatible or is it a breaking change?

…gnment

changeset-bot · 2026-01-16T21:46:53Z

⚠️ No Changeset found

Latest commit: 0211453

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

netlify · 2026-01-16T21:46:55Z

✅ Deploy Preview for hpe-theme-preview ready!

Name	Link
🔨 Latest commit	`0211453`
🔍 Latest deploy log	https://app.netlify.com/projects/hpe-theme-preview/deploys/6994fb04c66a5d000811876d
😎 Deploy Preview	https://deploy-preview-5700--hpe-theme-preview.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

netlify · 2026-01-16T21:47:07Z

✅ Deploy Preview for unrivaled-bublanina-3a9bae ready!

Name	Link
🔨 Latest commit	`0211453`
🔍 Latest deploy log	https://app.netlify.com/projects/unrivaled-bublanina-3a9bae/deploys/6994fb04741eda000845fa1f
😎 Deploy Preview	https://deploy-preview-5700--unrivaled-bublanina-3a9bae.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

netlify · 2026-01-16T21:47:37Z

✅ Deploy Preview for hpe-design-icons-grommet ready!

Name	Link
🔨 Latest commit	`0211453`
🔍 Latest deploy log	https://app.netlify.com/projects/hpe-design-icons-grommet/deploys/6994fb04196fcb00083b263a
😎 Deploy Preview	https://deploy-preview-5700--hpe-design-icons-grommet.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Copilot

Pull request overview

This pull request adds support for grouped navigation items in the NavigationMenu component, enabling hierarchical organization with non-interactive subheadings. The implementation introduces a new type property to distinguish between standard items and group containers, adds new NavGroup and GroupHeading components for rendering grouped structures, and includes comprehensive tests and documentation.

Changes:

Introduced type?: 'group' | 'item' property to NavItemType for distinguishing item types
Added NavGroup and GroupHeading components with proper ARIA roles and attributes for accessibility
Updated NavList to handle grouped navigation structures, including proper indentation and parent/child relationships
Enhanced ItemLabel to support dynamic color changes based on interaction state
Refactored navigation stories and extracted NavigationPanel component for better code organization

Reviewed changes

Copilot reviewed 12 out of 12 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
navigation.stories.tsx	Refactored to extract NavigationPanel component and added new story for grouped navigation
nav-items.tsx	Added navItemsSubheadings example data demonstrating grouped navigation structure
NavigationPanel.tsx	New extracted component handling navigation panel logic for both mobile and desktop
NavList.tsx	Updated to recognize and render grouped structures with proper focus and expansion logic
NavItem/NavItem.tsx	Added type property to NavItemType and enhanced focus state handling
NavItem/ItemLabel.tsx	Added dynamic color support and conditional icon rendering
NavGroup/NavGroup.tsx	New component rendering group containers with accessibility attributes
NavGroup/GroupHeading.tsx	New component rendering non-interactive group headers with heading role
NavigationMenu.test.tsx	Added comprehensive tests for grouped navigation functionality
DOCUMENTATION.md	Updated with grouped navigation examples and ARIA guidance

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

shared/aries-core/src/js/components/core/NavigationMenu/NavItem/NavItem.tsx

shared/aries-core/src/js/components/core/NavigationMenu/NavGroup/NavGroup.tsx

shared/aries-core/src/js/components/core/NavigationMenu/DOCUMENTATION.md

shared/aries-core/src/js/components/core/NavigationMenu/NavList.tsx

shared/aries-core/src/stories/navigation/content/NavigationPanel.tsx

Copilot

Pull request overview

Copilot reviewed 12 out of 12 changed files in this pull request and generated 3 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

shared/aries-core/src/js/components/core/NavigationMenu/NavGroup/NavGroup.tsx

shared/aries-core/src/js/components/core/NavigationMenu/NavGroup/GroupHeading.tsx

shared/aries-core/src/stories/navigation/content/NavigationPanel.tsx

…up/NavGroup.tsx Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Copilot

Pull request overview

Copilot reviewed 13 out of 13 changed files in this pull request and generated 9 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

shared/aries-core/src/js/components/core/NavigationMenu/__tests__/NavigationMenu.test.tsx

shared/aries-core/src/js/components/core/NavigationMenu/NavList.tsx

shared/aries-core/src/stories/navigation/content/nav-items.tsx

shared/aries-core/src/js/components/core/NavigationMenu/NavList.tsx

shared/aries-core/src/js/components/core/NavigationMenu/NavGroup/NavGroup.tsx

shared/aries-core/src/js/components/core/NavigationMenu/NavigationMenu.tsx

shared/aries-core/src/js/components/core/NavigationMenu/NavList.tsx

MikeKingdom

Cool stuff

Copilot

Pull request overview

Copilot reviewed 13 out of 13 changed files in this pull request and generated 4 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

shared/aries-core/src/js/components/core/NavigationMenu/NavGroup/GroupHeading.tsx

shared/aries-core/src/js/components/core/NavigationMenu/NavList.tsx

shared/aries-core/src/js/components/core/NavigationMenu/NavGroup/NavGroup.tsx

shared/aries-core/src/js/components/core/NavigationMenu/NavigationMenu.tsx

britt6612 · 2026-02-17T16:14:09Z

shared/aries-core/src/js/components/core/NavigationMenu/NavList.tsx

+            ...item,
+            children: item.children.map(child => ({
+              ...child,
+              level: item.level || 0,


here you are falling back on 0 for the level. above on line 7 isn't the type definition

export type NavItemWithLevel = NavItemType & { level?: 1 | 2 };

or am I reading this incorrectly? I know there isnt a TS error just something that caught my eye

good eye. Fixed NavItemWithLevel type definition.

britt6612

can you merge master see if those tests pass

halocline added 12 commits January 13, 2026 12:10

Created reusable NavigationPanel

bdfdfee

Unique keys for sessionStorage

5432be7

Progress towards supporting subheadings

5ebc893

Progress towards supporting subheadings

736204c

Adjusted NavItem label color at rest and hover + padding for icon ali…

2aefb27

…gnment

Adjusted NavItem label color at active

f599ce4

Adjusted NavItem label color at focus

d953af0

modified group border treatment

a3c931d

Adjust label indentation levels

d6dc9ba

Created NavGroup

8e6401c

Created NavGroup

edeec84

Added tests

ceaac05

Updated documentation

e0bf476

halocline requested a review from Copilot January 16, 2026 21:51

Copilot started reviewing on behalf of halocline January 16, 2026 21:52 View session

Copilot AI reviewed Jan 16, 2026

View reviewed changes

halocline added 2 commits January 16, 2026 15:07

Removed unused imports

8899895

fixed diagram

1357ee6

halocline requested a review from Copilot January 16, 2026 22:14

Copilot started reviewing on behalf of halocline January 16, 2026 22:14 View session

Copilot AI reviewed Jan 16, 2026

View reviewed changes

Update shared/aries-core/src/js/components/core/NavigationMenu/NavGro…

34a2331

…up/NavGroup.tsx Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

halocline requested review from MikeKingdom and britt6612 January 16, 2026 22:31

halocline added the Owner:Development Used in issues that are being worked on/should be worked on by a developer. label Jan 16, 2026

halocline mentioned this pull request Jan 16, 2026

[Architecture] PoC for website's left navigation #5609

Open

9 tasks

halocline added 8 commits February 6, 2026 14:37

Merge branch 'master' into navmenu-subheadings

c5b7f3a

Cleaned up indentation type

71a1388

Ensure nav items have unique ids

fbca487

removed assignment where equivalent

478fdd8

Use id instead of label

dc9cd42

Memoized assignUniqueIds

cde25b8

Fixed test to be async

ce64b59

removed unnecessary role

7088aed

halocline requested a review from Copilot February 6, 2026 22:59

Copilot started reviewing on behalf of halocline February 6, 2026 23:00 View session

halocline requested review from MikeKingdom and britt6612 February 6, 2026 23:06

Copilot AI reviewed Feb 6, 2026

View reviewed changes

MikeKingdom approved these changes Feb 9, 2026

View reviewed changes

halocline added 4 commits February 13, 2026 14:25

Prettier

c560776

Using item.id as identifiers

954eb51

Added a missing item.id

35a31c3

Fixed all id usage

dd56180

halocline requested a review from Copilot February 13, 2026 21:49

Copilot started reviewing on behalf of halocline February 13, 2026 21:50 View session

Copilot AI reviewed Feb 13, 2026

View reviewed changes

halocline added 2 commits February 13, 2026 15:31

fixed import

02eb981

cleanups

b4e6e8b

britt6612 reviewed Feb 17, 2026

View reviewed changes

fixed type

018851b

halocline requested a review from britt6612 February 17, 2026 21:21

britt6612 approved these changes Feb 17, 2026

View reviewed changes

type update

0211453

halocline merged commit 4f8c828 into master Feb 17, 2026
12 of 19 checks passed

halocline deleted the navmenu-subheadings branch February 17, 2026 23:35

Conversation

halocline commented Jan 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What does this PR do?

What are the relevant issues?

Where should the reviewer start?

How should this be manually tested?

Any background context you want to provide?

Screenshots (if appropriate)

Should this PR be mentioned in Design System updates?

Is this change backwards compatible or is it a breaking change?

Uh oh!

changeset-bot bot commented Jan 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

netlify bot commented Jan 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for hpe-theme-preview ready!

Uh oh!

netlify bot commented Jan 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for unrivaled-bublanina-3a9bae ready!

Uh oh!

netlify bot commented Jan 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for hpe-design-icons-grommet ready!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

MikeKingdom left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

britt6612 Feb 17, 2026

Choose a reason for hiding this comment

Uh oh!

halocline Feb 17, 2026

Choose a reason for hiding this comment

Uh oh!

britt6612 Feb 17, 2026

Choose a reason for hiding this comment

Uh oh!

britt6612 left a comment

halocline commented Jan 16, 2026 •

edited

Loading

changeset-bot bot commented Jan 16, 2026 •

edited

Loading

netlify bot commented Jan 16, 2026 •

edited

Loading

netlify bot commented Jan 16, 2026 •

edited

Loading

netlify bot commented Jan 16, 2026 •

edited

Loading