From 73701d271e7f99e61ff6cdafae9ddeae6c61c24d Mon Sep 17 00:00:00 2001
From: logonoff <git@logonoff.co>
Date: Thu, 4 Jun 2026 14:51:57 -0400
Subject: [PATCH] feat(NavExpandable): allow option to pass an icon

---
 .../src/components/Nav/NavExpandable.tsx      | 10 ++++----
 .../Nav/__tests__/NavExpandable.test.tsx      | 17 ++++++++++++++
 .../src/components/Nav/examples/Nav.md        |  3 ++-
 .../src/components/Nav/examples/NavIcons.tsx  | 23 ++++++++++++++++++-
 4 files changed, 46 insertions(+), 7 deletions(-)

diff --git a/packages/react-core/src/components/Nav/NavExpandable.tsx b/packages/react-core/src/components/Nav/NavExpandable.tsx
index da1f1e9d5ee..bc40a16a969 100644
--- a/packages/react-core/src/components/Nav/NavExpandable.tsx
+++ b/packages/react-core/src/components/Nav/NavExpandable.tsx
@@ -30,6 +30,8 @@ export interface NavExpandableProps
   onExpand?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, val: boolean) => void;
   /** Additional props added to the NavExpandable <button> */
   buttonProps?: any;
+  /** Icon added before the nav item children. */
+  icon?: React.ReactNode;
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
   ouiaId?: number | string;
 }
@@ -84,6 +86,7 @@ class NavExpandable extends Component<NavExpandableProps, NavExpandableState> {
 
   render() {
     const {
+      icon,
       title,
       srText,
       children,
@@ -132,11 +135,8 @@ class NavExpandable extends Component<NavExpandableProps, NavExpandableState> {
                         tabIndex={isSidebarOpen ? null : -1}
                         {...buttonProps}
                       >
-                        {typeof title !== 'string' ? (
-                          <span className={css(`${styles.nav}__link-text`)}>{title}</span>
-                        ) : (
-                          title
-                        )}
+                        {icon && <span className={css(styles.navLinkIcon)}>{icon}</span>}
+                        {typeof title !== 'string' ? <span className={css(styles.navLinkText)}>{title}</span> : title}
                         <span className={css(styles.navToggle)}>
                           <span className={css(styles.navToggleIcon)}>
                             <RhMicronsCaretDownIcon />
diff --git a/packages/react-core/src/components/Nav/__tests__/NavExpandable.test.tsx b/packages/react-core/src/components/Nav/__tests__/NavExpandable.test.tsx
index 473f2e7b44b..ca72e29b8b2 100644
--- a/packages/react-core/src/components/Nav/__tests__/NavExpandable.test.tsx
+++ b/packages/react-core/src/components/Nav/__tests__/NavExpandable.test.tsx
@@ -13,3 +13,20 @@ test('Does not render with the inert attribute when isExpanded is true', () => {
 
   expect(screen.getByLabelText('NavExpandable')).not.toHaveAttribute('inert', '');
 });
+
+test('Renders icon wrapped in nav link icon class when icon prop is provided', () => {
+  render(
+    <NavExpandable id="grp-1" title="NavExpandable" icon={<span data-testid="test-icon">Icon</span>}></NavExpandable>
+  );
+
+  const icon = screen.getByTestId('test-icon');
+  expect(icon).toBeInTheDocument();
+  expect(icon.parentElement).toHaveClass('pf-v6-c-nav__link-icon');
+});
+
+test('Does not render nav link icon wrapper when icon prop is not provided', () => {
+  render(<NavExpandable id="grp-1" title="NavExpandable"></NavExpandable>);
+
+  const button = screen.getByRole('button', { name: 'NavExpandable' });
+  expect(button.querySelector('.pf-v6-c-nav__link-icon')).not.toBeInTheDocument();
+});
diff --git a/packages/react-core/src/components/Nav/examples/Nav.md b/packages/react-core/src/components/Nav/examples/Nav.md
index df18298f17b..61f3d9a797c 100644
--- a/packages/react-core/src/components/Nav/examples/Nav.md
+++ b/packages/react-core/src/components/Nav/examples/Nav.md
@@ -12,6 +12,7 @@ import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-i
 import UserIcon from '@patternfly/react-icons/dist/esm/icons/user-icon';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 import FolderIcon from '@patternfly/react-icons/dist/esm/icons/folder-icon';
+import FolderOpenIcon from '@patternfly/react-icons/dist/esm/icons/folder-open-icon';
 import CloudIcon from '@patternfly/react-icons/dist/esm/icons/cloud-icon';
 import LinkIcon from '@patternfly/react-icons/dist/esm/icons/link-icon';
 
@@ -75,7 +76,7 @@ A flyout should be a `Menu` component. Press `space` or `right arrow` to open a
 
 ```
 
-### With item icons
+### With icons
 
 ```ts file="./NavIcons.tsx"
 
diff --git a/packages/react-core/src/components/Nav/examples/NavIcons.tsx b/packages/react-core/src/components/Nav/examples/NavIcons.tsx
index 47e7cbf4098..a7372531002 100644
--- a/packages/react-core/src/components/Nav/examples/NavIcons.tsx
+++ b/packages/react-core/src/components/Nav/examples/NavIcons.tsx
@@ -1,8 +1,9 @@
 import { useState } from 'react';
-import { Nav, NavItem, NavList } from '@patternfly/react-core';
+import { Nav, NavExpandable, NavItem, NavList } from '@patternfly/react-core';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 import FolderIcon from '@patternfly/react-icons/dist/esm/icons/folder-icon';
 import CloudIcon from '@patternfly/react-icons/dist/esm/icons/cloud-icon';
+import FolderOpenIcon from '@patternfly/react-icons/dist/esm/icons/folder-open-icon';
 import LinkIcon from '@patternfly/react-icons/dist/esm/icons/link-icon';
 
 export const NavIcons: React.FunctionComponent = () => {
@@ -55,6 +56,26 @@ export const NavIcons: React.FunctionComponent = () => {
         >
           Link 4
         </NavItem>
+        <NavExpandable title="Expandable" icon={<FolderOpenIcon />} groupId="nav-icon-expandable">
+          <NavItem
+            preventDefault
+            id="nav-icon-expandable-link1"
+            to="#nav-icon-expandable-link1"
+            itemId={4}
+            isActive={activeItem === 4}
+          >
+            Subnav link 1
+          </NavItem>
+          <NavItem
+            preventDefault
+            id="nav-icon-expandable-link2"
+            to="#nav-icon-expandable-link2"
+            itemId={5}
+            isActive={activeItem === 5}
+          >
+            Subnav link 2
+          </NavItem>
+        </NavExpandable>
       </NavList>
     </Nav>
   );