From 3a452dc3f62f24aa6386dc23f15b0fb5637c140a Mon Sep 17 00:00:00 2001
From: Eric Olkowski <thatblindgeye@gmail.com>
Date: Fri, 17 Jun 2022 16:11:58 -0400
Subject: [PATCH 1/3] chore(Navigation): convert examples to TypeScript

---
 .../src/components/Nav/examples/Nav.md        | 105 +++---------------
 .../components/Nav/examples/NavDefault.tsx    |  29 +++++
 .../components/Nav/examples/NavDrilldown.tsx  |  35 +++---
 .../components/Nav/examples/NavGrouped.tsx    |  67 +++++++++++
 4 files changed, 132 insertions(+), 104 deletions(-)
 create mode 100644 packages/react-core/src/components/Nav/examples/NavDefault.tsx
 create mode 100644 packages/react-core/src/components/Nav/examples/NavGrouped.tsx

diff --git a/packages/react-core/src/components/Nav/examples/Nav.md b/packages/react-core/src/components/Nav/examples/Nav.md
index c00ac933d5c..c9df9d06279 100644
--- a/packages/react-core/src/components/Nav/examples/Nav.md
+++ b/packages/react-core/src/components/Nav/examples/Nav.md
@@ -12,98 +12,14 @@ import './nav.css';
 
 ### Default
 
-```js
-import React from 'react';
-import { Nav, NavExpandable, NavItem, NavItemSeparator, NavList, NavGroup } from '@patternfly/react-core';
-
-class NavDefaultList extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      activeItem: 0
-    };
-    this.onSelect = result => {
-      this.setState({
-        activeItem: result.itemId
-      });
-    };
-  }
-
-  render() {
-    const { activeItem } = this.state;
-    return (
-      <Nav onSelect={this.onSelect} aria-label="Default global nav">
-        <NavList>
-          <NavItem id="default-link1" to="#default-link1" itemId={0} isActive={activeItem === 0}>
-            Default Link 1
-          </NavItem>
-          <NavItem id="default-link2" to="#default-link2" itemId={1} isActive={activeItem === 1}>
-            Default Link 2
-          </NavItem>
-          <NavItem id="default-link3" to="#default-link3" itemId={2} isActive={activeItem === 2}>
-            Default Link 3
-          </NavItem>
-          <NavItem id="default-link4" to="#default-link4" itemId={3} isActive={activeItem === 3}>
-            Default Link 4
-          </NavItem>
-        </NavList>
-      </Nav>
-    );
-  }
-}
+```ts file="./NavDefault.tsx"
 ```
 
 ### Grouped
 
-Note: to keep nav groups accessible an `aria-label` should be supplied if the `title` prop is not passed.
-
-```js
-import React from 'react';
-import { Nav, NavExpandable, NavItem, NavItemSeparator, NavList, NavGroup } from '@patternfly/react-core';
-
-class NavGroupedList extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      activeItem: 'grp-1_itm-1'
-    };
-    this.onSelect = result => {
-      this.setState({
-        activeItem: result.itemId
-      });
-    };
-  }
+The following example shows two navigation groups, each with a `title` prop passed into the nav group component. To keep nav groups accessible an `aria-label` must be passed in if the `title` prop is not passed in.
 
-  render() {
-    const { activeItem } = this.state;
-    return (
-      <Nav onSelect={this.onSelect} aria-label="Grouped global nav">
-        <NavGroup title="Section title 1">
-          <NavItem preventDefault to="#grouped-1" itemId="grp-1_itm-1" isActive={activeItem === 'grp-1_itm-1'}>
-            Group 1 Link 1
-          </NavItem>
-          <NavItem preventDefault to="#grouped-2" itemId="grp-1_itm-2" isActive={activeItem === 'grp-1_itm-2'}>
-            Group 1 Link 2
-          </NavItem>
-          <NavItem preventDefault to="#grouped-3" itemId="grp-1_itm-3" isActive={activeItem === 'grp-1_itm-3'}>
-            Group 1 Link 3
-          </NavItem>
-        </NavGroup>
-        <NavGroup title="Section title 2">
-          <NavItem preventDefault to="#grouped-4" itemId="grp-2_itm-1" isActive={activeItem === 'grp-2_itm-1'}>
-            Group 2 Link 1
-          </NavItem>
-          <NavItem preventDefault to="#grouped-5" itemId="grp-2_itm-2" isActive={activeItem === 'grp-2_itm-2'}>
-            Group 2 Link 2
-          </NavItem>
-          <NavItem preventDefault to="#grouped-6" itemId="grp-2_itm-3" isActive={activeItem === 'grp-2_itm-3'}>
-            Group 2 Link 3
-          </NavItem>
-        </NavGroup>
-      </Nav>
-    );
-  }
-}
+```ts file="./NavGrouped.tsx"
 ```
 
 ### Expandable
@@ -229,7 +145,13 @@ class NavExpandableTitlesList extends React.Component {
     return (
       <Nav onSelect={this.onSelect} aria-label="Expandable with subnav global nav">
         <NavList>
-          <NavExpandable title="Expandable with subnav group 1" srText="SR Link" groupId="grp-1" isActive={activeGroup === 'grp-1'} isExpanded>
+          <NavExpandable
+            title="Expandable with subnav group 1"
+            srText="SR Link"
+            groupId="grp-1"
+            isActive={activeGroup === 'grp-1'}
+            isExpanded
+          >
             <NavItem
               preventDefault
               to="#sr-expandable-1"
@@ -258,7 +180,12 @@ class NavExpandableTitlesList extends React.Component {
               Expandable 1 link 3
             </NavItem>
           </NavExpandable>
-          <NavExpandable title="Expandable with subnav group 2" srText="SR Link 2" groupId="grp-2" isActive={activeGroup === 'grp-2'}>
+          <NavExpandable
+            title="Expandable with subnav group 2"
+            srText="SR Link 2"
+            groupId="grp-2"
+            isActive={activeGroup === 'grp-2'}
+          >
             <NavItem
               preventDefault
               to="#sr-expandable-4"
diff --git a/packages/react-core/src/components/Nav/examples/NavDefault.tsx b/packages/react-core/src/components/Nav/examples/NavDefault.tsx
new file mode 100644
index 00000000000..b5ed481f829
--- /dev/null
+++ b/packages/react-core/src/components/Nav/examples/NavDefault.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { Nav, NavItem, NavList } from '@patternfly/react-core';
+
+export const NavDefault: React.FunctionComponent = () => {
+  const [activeItem, setActiveItem] = React.useState(0);
+
+  const onSelect = (result: { itemId: number | string }) => {
+    setActiveItem(result.itemId as number);
+  };
+
+  return (
+    <Nav onSelect={onSelect}>
+      <NavList>
+        <NavItem preventDefault id="nav-default-link1" to="#nav-default-link1" itemId={0} isActive={activeItem === 0}>
+          Link 1
+        </NavItem>
+        <NavItem preventDefault id="nav-default-link2" to="#nav-default-link2" itemId={1} isActive={activeItem === 1}>
+          Link 2
+        </NavItem>
+        <NavItem preventDefault id="nav-default-link3" to="#nav-default-link3" itemId={2} isActive={activeItem === 2}>
+          Link 3
+        </NavItem>
+        <NavItem preventDefault id="nav-default-link4" to="#nav-default-link4" itemId={3} isActive={activeItem === 3}>
+          Link 4
+        </NavItem>
+      </NavList>
+    </Nav>
+  );
+};
diff --git a/packages/react-core/src/components/Nav/examples/NavDrilldown.tsx b/packages/react-core/src/components/Nav/examples/NavDrilldown.tsx
index 856bdabc0e5..205595f78be 100644
--- a/packages/react-core/src/components/Nav/examples/NavDrilldown.tsx
+++ b/packages/react-core/src/components/Nav/examples/NavDrilldown.tsx
@@ -7,40 +7,45 @@ interface MenuHeights {
 }
 
 const subMenuTwo: JSX.Element = (
-  <DrilldownMenu id="subMenu-2">
-    <MenuItem itemId="subMenu-2-breadcrumb" direction="up">
+  <DrilldownMenu id="nav-drilldown-subMenu-2">
+    <MenuItem itemId="nav-drilldown-subMenu-2-breadcrumb" direction="up">
       SubMenu 1 - Item 1
     </MenuItem>
-    <MenuItem itemId="subMenu-2_item-1" to="#subMenu-2_item-1">
+    <MenuItem itemId="nav-drilldown-subMenu-2_item-1" to="#subMenu-2_item-1">
       SubMenu 2 - Item 1
     </MenuItem>
-    <MenuItem itemId="subMenu-2_item-2" to="#subMenu-2_item-2">
+    <MenuItem itemId="nav-drilldown-subMenu-2_item-2" to="#subMenu-2_item-2">
       SubMenu 2 - Item 2
     </MenuItem>
-    <MenuItem itemId="subMenu-2_item-3" to="#subMenu-2_item-3">
+    <MenuItem itemId="nav-drilldown-subMenu-2_item-3" to="#subMenu-2_item-3">
       SubMenu 2 - Item 3
     </MenuItem>
   </DrilldownMenu>
 );
 
 const subMenuOne: JSX.Element = (
-  <DrilldownMenu id="subMenu-1">
-    <MenuItem itemId="subMenu-1-breadcrumb" direction="up">
+  <DrilldownMenu id="nav-drilldown-subMenu-1">
+    <MenuItem itemId="nav-drilldown-subMenu-1-breadcrumb" direction="up">
       Item 1
     </MenuItem>
-    <MenuItem itemId="subMenu-1_item-1" description="SubMenu 2" direction="down" drilldownMenu={subMenuTwo}>
+    <MenuItem
+      itemId="nav-drilldown-subMenu-1_item-1"
+      description="SubMenu 2"
+      direction="down"
+      drilldownMenu={subMenuTwo}
+    >
       SubMenu 1 - Item 1
     </MenuItem>
-    <MenuItem itemId="subMenu-1_item-2" to="#subMenu-1_item-2">
+    <MenuItem itemId="nav-drilldown-subMenu-1_item-2" to="#subMenu-1_item-2">
       SubMenu 1 - Item 2
     </MenuItem>
-    <MenuItem itemId="subMenu-1_item-3" to="#subMenu-1_item-3">
+    <MenuItem itemId="nav-drilldown-subMenu-1_item-3" to="#subMenu-1_item-3">
       SubMenu 1 - Item 3
     </MenuItem>
   </DrilldownMenu>
 );
 
-export const NavLevelThreeDrill: React.FunctionComponent = () => {
+export const NavigationDrilldown: React.FunctionComponent = () => {
   const [menuDrilledIn, setMenuDrilledIn] = React.useState<string[]>([]);
   const [drilldownPath, setDrilldownPath] = React.useState<string[]>([]);
   const [menuHeights, setMenuHeights] = React.useState<MenuHeights>({});
@@ -67,7 +72,7 @@ export const NavLevelThreeDrill: React.FunctionComponent = () => {
   return (
     <Nav aria-label="Drilldown global nav">
       <Menu
-        id="rootMenu"
+        id="nav-drilldown-rootMenu"
         containsDrilldown
         drilldownItemPath={drilldownPath}
         drilledInMenus={menuDrilledIn}
@@ -78,13 +83,13 @@ export const NavLevelThreeDrill: React.FunctionComponent = () => {
       >
         <MenuContent menuHeight={`${menuHeights[activeMenu]}px`}>
           <MenuList>
-            <MenuItem itemId="item-1" direction="down" description="SubMenu 1" drilldownMenu={subMenuOne}>
+            <MenuItem itemId="nav-drilldown-item-1" direction="down" description="SubMenu 1" drilldownMenu={subMenuOne}>
               Item 1
             </MenuItem>
-            <MenuItem itemId="item-2" to="#item-2">
+            <MenuItem itemId="nav-drilldown-item-2" to="#item-2">
               Item 2
             </MenuItem>
-            <MenuItem itemId="item-3" to="#item-3">
+            <MenuItem itemId="nav-drilldown-item-3" to="#item-3">
               Item 3
             </MenuItem>
           </MenuList>
diff --git a/packages/react-core/src/components/Nav/examples/NavGrouped.tsx b/packages/react-core/src/components/Nav/examples/NavGrouped.tsx
new file mode 100644
index 00000000000..9421415462c
--- /dev/null
+++ b/packages/react-core/src/components/Nav/examples/NavGrouped.tsx
@@ -0,0 +1,67 @@
+import React from 'react';
+import { Nav, NavItem, NavGroup } from '@patternfly/react-core';
+
+export const NavGrouped: React.FunctionComponent = () => {
+  const [activeItem, setActiveItem] = React.useState('group-1_item-1');
+
+  const onSelect = (result: { itemId: number | string }) => {
+    setActiveItem(result.itemId as string);
+  };
+
+  return (
+    <Nav onSelect={onSelect}>
+      <NavGroup title="Section title 1">
+        <NavItem
+          preventDefault
+          to="#nav-group1-item1"
+          itemId="group-1_item-1"
+          isActive={activeItem === 'group-1_item-1'}
+        >
+          Link 1
+        </NavItem>
+        <NavItem
+          preventDefault
+          to="#nav-group1-item2"
+          itemId="group-1_item-2"
+          isActive={activeItem === 'group-1_item-2'}
+        >
+          Link 2
+        </NavItem>
+        <NavItem
+          preventDefault
+          to="#nav-group1-item3"
+          itemId="group-1_item-3"
+          isActive={activeItem === 'group-1_item-3'}
+        >
+          Link 3
+        </NavItem>
+      </NavGroup>
+      <NavGroup title="Section title 2">
+        <NavItem
+          preventDefault
+          to="#nav-group2-item1"
+          itemId="group-2_item-1"
+          isActive={activeItem === 'group-2_item-1'}
+        >
+          Link 1
+        </NavItem>
+        <NavItem
+          preventDefault
+          to="#nav-group2-item2"
+          itemId="group-2_item-2"
+          isActive={activeItem === 'group-2_item-2'}
+        >
+          Link 2
+        </NavItem>
+        <NavItem
+          preventDefault
+          to="#nav-group2-item3"
+          itemId="group-2_item-3"
+          isActive={activeItem === 'group-2_item-3'}
+        >
+          Link 3
+        </NavItem>
+      </NavGroup>
+    </Nav>
+  );
+};

From cf2fa18e60f54903827736666ccd1c4c6adc4cb4 Mon Sep 17 00:00:00 2001
From: Eric Olkowski <thatblindgeye@gmail.com>
Date: Tue, 21 Jun 2022 14:12:20 -0400
Subject: [PATCH 2/3] Complete remaining conversions

---
 .../src/components/Nav/examples/Nav.md        | 557 +-----------------
 .../components/Nav/examples/NavExpandable.tsx | 119 ++++
 .../Nav/examples/NavExpandableThirdLevel.tsx  | 115 ++++
 .../src/components/Nav/examples/NavFlyout.tsx | 102 ++++
 .../Nav/examples/NavHorizontalPageHeader.tsx  |  34 ++
 .../Nav/examples/NavHorizontalSubNav.tsx      |  32 +
 .../Nav/examples/NavLegacyTertiary.tsx        |  32 +
 .../src/components/Nav/examples/NavMixed.tsx  | 101 ++++
 8 files changed, 542 insertions(+), 550 deletions(-)
 create mode 100644 packages/react-core/src/components/Nav/examples/NavExpandable.tsx
 create mode 100644 packages/react-core/src/components/Nav/examples/NavExpandableThirdLevel.tsx
 create mode 100644 packages/react-core/src/components/Nav/examples/NavFlyout.tsx
 create mode 100644 packages/react-core/src/components/Nav/examples/NavHorizontalPageHeader.tsx
 create mode 100644 packages/react-core/src/components/Nav/examples/NavHorizontalSubNav.tsx
 create mode 100644 packages/react-core/src/components/Nav/examples/NavLegacyTertiary.tsx
 create mode 100644 packages/react-core/src/components/Nav/examples/NavMixed.tsx

diff --git a/packages/react-core/src/components/Nav/examples/Nav.md b/packages/react-core/src/components/Nav/examples/Nav.md
index c9df9d06279..f9ae73ae400 100644
--- a/packages/react-core/src/components/Nav/examples/Nav.md
+++ b/packages/react-core/src/components/Nav/examples/Nav.md
@@ -24,582 +24,39 @@ The following example shows two navigation groups, each with a `title` prop pass
 
 ### Expandable
 
-```js
-import React from 'react';
-import { Nav, NavExpandable, NavItem, NavItemSeparator, NavList, NavGroup } from '@patternfly/react-core';
-
-class NavExpandableList extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      activeGroup: 'grp-1',
-      activeItem: 'grp-1_itm-1'
-    };
-    this.onSelect = result => {
-      this.setState({
-        activeGroup: result.groupId,
-        activeItem: result.itemId
-      });
-    };
-    this.onToggle = result => {
-      // eslint-disable-next-line no-console
-      console.log(`Group ${result.groupId} expanded? ${result.isExpanded}`);
-    };
-    this.handleItemOnclick = (event, itemId, groupId) => {
-      // eslint-disable-next-line no-console
-      console.log(`my own click handler on ${itemId}`);
-    };
-  }
-
-  render() {
-    const { activeGroup, activeItem } = this.state;
-    return (
-      <Nav onSelect={this.onSelect} onToggle={this.onToggle} aria-label="Expandable global nav">
-        <NavList>
-          <NavExpandable title="Expandable Group 1" groupId="grp-1" isActive={activeGroup === 'grp-1'} isExpanded>
-            <NavItem
-              preventDefault
-              to="#expandable-1"
-              groupId="grp-1"
-              itemId="grp-1_itm-1"
-              isActive={activeItem === 'grp-1_itm-1'}
-            >
-              Subnav 1 Link 1
-            </NavItem>
-            <NavItemSeparator />
-            <NavItem preventDefault groupId="grp-1" itemId="grp-1_itm-2" isActive={activeItem === 'grp-1_itm-2'}>
-              Subnav 1 Link 2
-            </NavItem>
-            <NavItem to="#expandable-3" groupId="grp-1" itemId="grp-1_itm-3" isActive={activeItem === 'grp-1_itm-3'}>
-              Subnav 1 Link 3
-            </NavItem>
-          </NavExpandable>
-          <NavExpandable title="Expandable Group 2" groupId="grp-2" isActive={activeGroup === 'grp-2'} isExpanded>
-            <NavItem
-              preventDefault
-              onClick={this.handleItemOnclick}
-              groupId="grp-2"
-              itemId="own-item-handler"
-              isActive={activeItem === 'own-item-handler'}
-            >
-              Custom onClick
-            </NavItem>
-            <NavItem
-              preventDefault
-              to="#expandable-4"
-              groupId="grp-2"
-              itemId="grp-2_itm-1"
-              isActive={activeItem === 'grp-2_itm-1'}
-            >
-              Subnav 2 Link 1
-            </NavItem>
-            <NavItem
-              preventDefault
-              to="#expandable-5"
-              groupId="grp-2"
-              itemId="grp-2_itm-2"
-              isActive={activeItem === 'grp-2_itm-2'}
-            >
-              Subnav 2 Link 2
-            </NavItem>
-            <NavItem
-              preventDefault
-              to="#expandable-6"
-              groupId="grp-2"
-              itemId="grp-2_itm-3"
-              isActive={activeItem === 'grp-2_itm-3'}
-            >
-              Subnav 2 Link 3
-            </NavItem>
-          </NavExpandable>
-        </NavList>
-      </Nav>
-    );
-  }
-}
-```
-
-### Expandable (w/subnavigation titles)
-
-```js
-import React from 'react';
-import { Nav, NavExpandable, NavItem, NavItemSeparator, NavList, NavGroup } from '@patternfly/react-core';
-
-class NavExpandableTitlesList extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      activeGroup: 'grp-1',
-      activeItem: 'grp-1_itm-1'
-    };
-    this.onSelect = result => {
-      this.setState({
-        activeGroup: result.groupId,
-        activeItem: result.itemId
-      });
-    };
-  }
-
-  render() {
-    const { activeGroup, activeItem } = this.state;
-    return (
-      <Nav onSelect={this.onSelect} aria-label="Expandable with subnav global nav">
-        <NavList>
-          <NavExpandable
-            title="Expandable with subnav group 1"
-            srText="SR Link"
-            groupId="grp-1"
-            isActive={activeGroup === 'grp-1'}
-            isExpanded
-          >
-            <NavItem
-              preventDefault
-              to="#sr-expandable-1"
-              groupId="grp-1"
-              itemId="grp-1_itm-1"
-              isActive={activeItem === 'grp-1_itm-1'}
-            >
-              Expandable 1 link 1
-            </NavItem>
-            <NavItem
-              preventDefault
-              to="#sr-expandable-2"
-              groupId="grp-1"
-              itemId="grp-1_itm-2"
-              isActive={activeItem === 'grp-1_itm-2'}
-            >
-              Expandable 1 link 2
-            </NavItem>
-            <NavItem
-              preventDefault
-              to="#sr-expandable-3"
-              groupId="grp-1"
-              itemId="grp-1_itm-3"
-              isActive={activeItem === 'grp-1_itm-3'}
-            >
-              Expandable 1 link 3
-            </NavItem>
-          </NavExpandable>
-          <NavExpandable
-            title="Expandable with subnav group 2"
-            srText="SR Link 2"
-            groupId="grp-2"
-            isActive={activeGroup === 'grp-2'}
-          >
-            <NavItem
-              preventDefault
-              to="#sr-expandable-4"
-              groupId="grp-2"
-              itemId="grp-2_itm-1"
-              isActive={activeItem === 'grp-2_itm-1'}
-            >
-              Expandable 2 Link 1
-            </NavItem>
-            <NavItem
-              preventDefault
-              to="#sr-expandable-5"
-              groupId="grp-2"
-              itemId="grp-2_itm-2"
-              isActive={activeItem === 'grp-2_itm-2'}
-            >
-              Expandable 2 Link 2
-            </NavItem>
-            <NavItem
-              preventDefault
-              to="#sr-expandable-6"
-              groupId="grp-2"
-              itemId="grp-2_itm-3"
-              isActive={activeItem === 'grp-2_itm-3'}
-            >
-              Expandable 2 Link 3
-            </NavItem>
-          </NavExpandable>
-        </NavList>
-      </Nav>
-    );
-  }
-}
+```ts file="./NavExpandable.tsx"
 ```
 
 ### Expandable third level
 
-```js
-import React from 'react';
-import { Nav, NavExpandable, NavItem, NavList } from '@patternfly/react-core';
-
-NavExpandableThirdLevelList = () => {
-  const [activeGroup, setActiveGroup] = React.useState('grp-1');
-  const [activeItem, setActiveItem] = React.useState('grp-1_itm-1');
-
-  onSelect = result => {
-    setActiveGroup(result.groupId);
-    setActiveItem(result.itemId);
-  };
-
-  onToggle = result => {
-    // eslint-disable-next-line no-console
-    console.log(`Group ${result.groupId} expanded? ${result.isExpanded}`);
-  };
-
-  return (
-    <Nav onSelect={onSelect} onToggle={onToggle} aria-label="Expandable third level global nav">
-      <NavList>
-        <NavExpandable title="Third level group 1" groupId="grp-1" isActive={activeGroup === 'grp-1'} isExpanded>
-          <NavItem
-            preventDefault
-            to="#expandable-1"
-            groupId="grp-1"
-            itemId="grp-1_itm-1"
-            isActive={activeItem === 'grp-1_itm-1'}
-          >
-            With 3rd 1 Link 1
-          </NavItem>
-          <NavItem
-            preventDefault
-            to="#expandable-2"
-            groupId="grp-1"
-            itemId="grp-1_itm-2"
-            isActive={activeItem === 'grp-1_itm-2'}
-          >
-            With 3rd 1 Link 2
-          </NavItem>
-          <NavItem
-            preventDefault
-            to="#expandable-3"
-            groupId="grp-1"
-            itemId="grp-1_itm-3"
-            isActive={activeItem === 'grp-1_itm-3'}
-          >
-            With 3rd 1 Link 3
-          </NavItem>
-        </NavExpandable>
-        <NavExpandable title="Third level group 2" groupId="grp-2" isActive={activeGroup === 'grp-2'} isExpanded>
-          <NavItem
-            preventDefault
-            to="#expandable-4"
-            groupId="grp-2"
-            itemId="grp-2_itm-1"
-            isActive={activeItem === 'grp-2_itm-1'}
-          >
-            With 3rd 2 Link 1
-          </NavItem>
-          <NavExpandable title="Third Level" groupId="grp-3" isActive={activeGroup === 'grp-3'} isExpanded>
-            <NavItem
-              preventDefault
-              to="#expandable-6"
-              groupId="grp-3"
-              itemId="grp-3_itm-1"
-              isActive={activeItem === 'grp-3_itm-1'}
-            >
-              Third Level Link 1
-            </NavItem>
-            <NavItem
-              preventDefault
-              to="#expandable-7"
-              groupId="grp-3"
-              itemId="grp-3_itm-2"
-              isActive={activeItem === 'grp-3_itm-2'}
-            >
-              Third Level Link 2
-            </NavItem>
-          </NavExpandable>
-          <NavItem
-            preventDefault
-            to="#expandable-8"
-            groupId="grp-2"
-            itemId="grp-2_itm-2"
-            isActive={activeItem === 'grp-2_itm-3'}
-          >
-            With 3rd 2 Link 3
-          </NavItem>
-        </NavExpandable>
-      </NavList>
-    </Nav>
-  );
-};
+```ts file="./NavExpandableThirdLevel.tsx"
 ```
 
 ### Mixed
 
-```js
-import React from 'react';
-import { Nav, NavExpandable, NavItem, NavItemSeparator, NavList, NavGroup } from '@patternfly/react-core';
-
-class NavMixedList extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      activeGroup: '',
-      activeItem: 'itm-1'
-    };
-    this.onSelect = result => {
-      this.setState({
-        activeGroup: result.groupId,
-        activeItem: result.itemId
-      });
-    };
-  }
-
-  render() {
-    const { activeGroup, activeItem } = this.state;
-    return (
-      <Nav onSelect={this.onSelect} aria-label="Mixed global nav">
-        <NavList>
-          <NavItem preventDefault to="#mixed-1" itemId="itm-1" isActive={activeItem === 'itm-1'}>
-            Link 1 (not expandable)
-          </NavItem>
-          <NavExpandable title="Link 2 - expandable" groupId="grp-1" isActive={activeGroup === 'grp-1'}>
-            <NavItem
-              preventDefault
-              to="#mixed-2"
-              groupId="grp-1"
-              itemId="grp-1_itm-1"
-              isActive={activeItem === 'grp-1_itm-1'}
-            >
-              Mixed Link 1
-            </NavItem>
-            <NavItem
-              preventDefault
-              to="#mixed-3"
-              groupId="grp-1"
-              itemId="grp-1_itm-2"
-              isActive={activeItem === 'grp-1_itm-2'}
-            >
-              Mixed Link 2
-            </NavItem>
-            <NavItem
-              preventDefault
-              to="#mixed-4"
-              groupId="grp-1"
-              itemId="grp-1_itm-3"
-              isActive={activeItem === 'grp-1_itm-3'}
-            >
-              Mixed Link 3
-            </NavItem>
-          </NavExpandable>
-          <NavExpandable title="Link 3 - expandable" groupId="grp-2" isActive={activeGroup === 'grp-2'}>
-            <NavItem
-              preventDefault
-              to="#mixed-5"
-              groupId="grp-2"
-              itemId="grp-2_itm-1"
-              isActive={activeItem === 'grp-2_itm-1'}
-            >
-              Mixed 2 Link 1
-            </NavItem>
-            <NavItem
-              preventDefault
-              to="#mixed-6"
-              groupId="grp-2"
-              itemId="grp-2_itm-2"
-              isActive={activeItem === 'grp-2_itm-2'}
-            >
-              Mixed 2 Link 2
-            </NavItem>
-            <NavItem
-              preventDefault
-              to="#mixed-7"
-              groupId="grp-2"
-              itemId="grp-2_itm-3"
-              isActive={activeItem === 'grp-2_itm-3'}
-            >
-              Mixed 2 Link 3
-            </NavItem>
-          </NavExpandable>
-        </NavList>
-      </Nav>
-    );
-  }
-}
+```ts file="./NavMixed.tsx"
 ```
 
 ### Horizontal (only in PageHeader)
 
-```js
-import React from 'react';
-import { Nav, NavExpandable, NavItem, NavItemSeparator, NavList, NavGroup, PageHeader } from '@patternfly/react-core';
-
-class NavHorizontalList extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      activeItem: 0
-    };
-    this.onSelect = result => {
-      this.setState({
-        activeItem: result.itemId
-      });
-    };
-  }
-
-  render() {
-    const { activeItem } = this.state;
-    const nav = (
-      <Nav onSelect={this.onSelect} variant="horizontal" aria-label="Horizontal global nav">
-        <NavList>
-          {Array.apply(0, Array(10)).map(function(x, i) {
-            const num = i + 1;
-            return (
-              <NavItem key={num} itemId={num} isActive={activeItem === num} href="#">
-                Horizontal nav item {num}
-              </NavItem>
-            );
-          })}
-        </NavList>
-      </Nav>
-    );
-    return <PageHeader topNav={nav} />;
-  }
-}
+```ts file="./NavHorizontalPageHeader.tsx"
 ```
 
 ### Horizontal subnav
 
-```js
-import React from 'react';
-import { Nav, NavExpandable, NavItem, NavItemSeparator, NavList, NavGroup, PageHeader } from '@patternfly/react-core';
-
-class HorizontalSubNav extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      activeItem: 0
-    };
-    this.onSelect = result => {
-      this.setState({
-        activeItem: result.itemId
-      });
-    };
-  }
-
-  render() {
-    const { activeItem } = this.state;
-    return (
-      <Nav onSelect={this.onSelect} variant="horizontal-subnav" aria-label="Horizontal subnav global nav">
-        <NavList>
-          {Array.apply(0, Array(10)).map(function(x, i) {
-            const num = i + 1;
-            return (
-              <NavItem key={num} itemId={num} isActive={activeItem === num} href="#">
-                Horizontal nav item {num}
-              </NavItem>
-            );
-          })}
-        </NavList>
-      </Nav>
-    );
-  }
-}
+```ts file="./NavHorizontalSubNav.tsx"
 ```
 
 ### Legacy tertiary
 
-```js
-import React from 'react';
-import { Nav, NavExpandable, NavItem, NavItemSeparator, NavList, NavGroup, PageSection } from '@patternfly/react-core';
-
-class NavTertiaryList extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      activeItem: 0
-    };
-    this.onSelect = result => {
-      this.setState({
-        activeItem: result.itemId
-      });
-    };
-  }
-
-  render() {
-    const { activeItem } = this.state;
-    return (
-      <Nav onSelect={this.onSelect} variant="tertiary" aria-label="Tertiary global nav">
-        <NavList>
-          {Array.apply(0, Array(10)).map(function(x, i) {
-            const num = i + 1;
-            return (
-              <NavItem key={num} itemId={num} isActive={activeItem === num} href="#">
-                Tertiary nav item {num}
-              </NavItem>
-            );
-          })}
-        </NavList>
-      </Nav>
-    );
-  }
-}
+```ts file="./NavLegacyTertiary.tsx"
 ```
 
 ### Flyout
 
 A flyout should be a `Menu` component. Press `space` or `right arrow` to open a flyout using the keyboard, use the arrow keys to navigate between flyout items, and press `escape` or `left arrow` to close a flyout.
 
-```js isBeta
-import React from 'react';
-import {
-  Nav,
-  NavExpandable,
-  NavItem,
-  NavItemSeparator,
-  NavList,
-  NavGroup,
-  Menu,
-  MenuContent,
-  MenuList,
-  MenuItem
-} from '@patternfly/react-core';
-
-NavWithFlyout = () => {
-  const [activeItem, setActiveItem] = React.useState(0);
-  const onSelect = result => setActiveItem(result.itemId);
-  const onMenuSelect = (event, itemId) => setActiveItem(itemId);
-
-  const numFlyouts = 5;
-  const FlyoutMenu = ({ depth, children }) => (
-    <Menu key={depth} containsFlyout isNavFlyout id={`menu-${depth}`} onSelect={onMenuSelect}>
-      <MenuContent>
-        <MenuList>
-          <MenuItem flyoutMenu={children} itemId={`next-menu-${depth}`} to={`#menu-link-${depth}`}>
-            Next menu
-          </MenuItem>
-          {[...Array(numFlyouts - depth).keys()].map(j => (
-            <MenuItem key={`${depth}-${j}`} itemId={`${depth}-${j}`} to={`#menu-link-${depth}-${j}`}>
-              Menu {depth} item {j}
-            </MenuItem>
-          ))}
-          <MenuItem flyoutMenu={children} itemId={`next-menu-2-${depth}`} to={`#second-menu-link-${depth}`}>
-            Next menu
-          </MenuItem>
-        </MenuList>
-      </MenuContent>
-    </Menu>
-  );
-
-  let curFlyout = <FlyoutMenu depth={1} />;
-  for (let i = 2; i < numFlyouts - 1; i++) {
-    curFlyout = <FlyoutMenu depth={i}>{curFlyout}</FlyoutMenu>;
-  }
-
-  return (
-    <Nav onSelect={onSelect} aria-label="Flyout global nav">
-      <NavList>
-        <NavItem id="flyout-link1" to="#flyout-link1" itemId={0} isActive={activeItem === 0}>
-          Flyout Link 1
-        </NavItem>
-        <NavItem id="flyout-link2" to="#flyout-link2" itemId={1} isActive={activeItem === 1}>
-          Flyout Link 2
-        </NavItem>
-        <NavItem flyout={curFlyout} id="flyout-link3" to="#flyout-link3" itemId={2} isActive={activeItem === 2}>
-          Flyout Link 3
-        </NavItem>
-        <NavItem id="flyout-link4" to="#flyout-link4" itemId={3} isActive={activeItem === 3}>
-          Flyout Link 4
-        </NavItem>
-      </NavList>
-    </Nav>
-  );
-};
+```ts file="./NavFlyout.tsx" isBeta
 ```
 
 ### Drilldown
diff --git a/packages/react-core/src/components/Nav/examples/NavExpandable.tsx b/packages/react-core/src/components/Nav/examples/NavExpandable.tsx
new file mode 100644
index 00000000000..589bbb42b34
--- /dev/null
+++ b/packages/react-core/src/components/Nav/examples/NavExpandable.tsx
@@ -0,0 +1,119 @@
+import React from 'react';
+import { Nav, NavExpandable, NavItem, NavItemSeparator, NavList } from '@patternfly/react-core';
+
+export const NavExpandableExample: React.FunctionComponent = () => {
+  const [activeGroup, setActiveGroup] = React.useState('nav-expandable-group-1');
+  const [activeItem, setActiveItem] = React.useState('nav-expandable-group-1_item-1');
+
+  const onSelect = (result: { itemId: number | string; groupId: number | string }) => {
+    setActiveGroup(result.groupId as string);
+    setActiveItem(result.itemId as string);
+  };
+
+  const onToggle = (result: { groupId: number | string; isExpanded: boolean }) => {
+    // eslint-disable-next-line no-console
+    console.log(`Group ${result.groupId} expanded? ${result.isExpanded}`);
+  };
+
+  const onItemClick = (
+    _event: React.FormEvent<HTMLInputElement>,
+    itemId: number | string,
+    _groupId: number | string
+  ) => {
+    // eslint-disable-next-line no-console
+    console.log(`Custom click handler on ${itemId}`);
+  };
+
+  return (
+    <Nav onSelect={onSelect} onToggle={onToggle}>
+      <NavList>
+        <NavExpandable
+          title="Expandable section title 1"
+          groupId="nav-expandable-group-1"
+          isActive={activeGroup === 'nav-expandable-group-1'}
+          isExpanded
+        >
+          <NavItem
+            preventDefault
+            id="expandable-1"
+            to="#expandable-1"
+            groupId="nav-expandable-group-1"
+            itemId="nav-expandable-group-1_item-1"
+            isActive={activeItem === 'nav-expandable-group-1_item-1'}
+          >
+            Link 1
+          </NavItem>
+          <NavItemSeparator />
+          <NavItem
+            preventDefault
+            id="expandable-2"
+            to="#expandable-2"
+            groupId="nav-expandable-group-1"
+            itemId="nav-expandable-group-1_item-2"
+            isActive={activeItem === 'nav-expandable-group-1_item-2'}
+          >
+            Link 2
+          </NavItem>
+          <NavItem
+            preventDefault
+            id="expandable-3"
+            to="#expandable-3"
+            groupId="nav-expandable-group-1"
+            itemId="nav-expandable-group-1_item-3"
+            isActive={activeItem === 'nav-expandable-group-1_item-3'}
+          >
+            Link 3
+          </NavItem>
+        </NavExpandable>
+        <NavExpandable
+          title="Expandable section title 2"
+          groupId="nav-expandable-group-2"
+          isActive={activeGroup === 'nav-expandable-group-2'}
+          isExpanded
+        >
+          <NavItem
+            preventDefault
+            onClick={onItemClick}
+            id="expandable-custom-click"
+            to="#expandable-custom-click"
+            groupId="nav-expandable-group-2"
+            itemId="nav-expandable-group-2_custom-click"
+            isActive={activeItem === 'nav-expandable-group-2_custom-click'}
+          >
+            Custom onClick Link
+          </NavItem>
+          <NavItem
+            preventDefault
+            id="expandable-4"
+            to="#expandable-4"
+            groupId="nav-expandable-group-2"
+            itemId="nav-expandable-group-2_item-1"
+            isActive={activeItem === 'nav-expandable-group-2_item-1'}
+          >
+            Link 1
+          </NavItem>
+          <NavItem
+            preventDefault
+            id="expandable-5"
+            to="#expandable-5"
+            groupId="nav-expandable-group-2"
+            itemId="nav-expandable-group-2_item-2"
+            isActive={activeItem === 'nav-expandable-group-2_item-2'}
+          >
+            Link 2
+          </NavItem>
+          <NavItem
+            preventDefault
+            id="expandable-6"
+            to="#expandable-6"
+            groupId="nav-expandable-group-2"
+            itemId="nav-expandable-group-2_item-3"
+            isActive={activeItem === 'nav-expandable-group-2_item-3'}
+          >
+            Link 3
+          </NavItem>
+        </NavExpandable>
+      </NavList>
+    </Nav>
+  );
+};
diff --git a/packages/react-core/src/components/Nav/examples/NavExpandableThirdLevel.tsx b/packages/react-core/src/components/Nav/examples/NavExpandableThirdLevel.tsx
new file mode 100644
index 00000000000..7bb4009aa80
--- /dev/null
+++ b/packages/react-core/src/components/Nav/examples/NavExpandableThirdLevel.tsx
@@ -0,0 +1,115 @@
+import React from 'react';
+import { Nav, NavExpandable, NavItem, NavList } from '@patternfly/react-core';
+
+export const NavExpandableThirdLevel: React.FunctionComponent = () => {
+  const [activeGroup, setActiveGroup] = React.useState('nav-expand3rd-group-1');
+  const [activeItem, setActiveItem] = React.useState('nav-expand3rd-group-1_item-1');
+
+  const onSelect = (result: { itemId: number | string; groupId: number | string }) => {
+    setActiveGroup(result.groupId as string);
+    setActiveItem(result.itemId as string);
+  };
+
+  const onToggle = (result: { groupId: number | string; isExpanded: boolean }) => {
+    // eslint-disable-next-line no-console
+    console.log(`Group ${result.groupId} expanded? ${result.isExpanded}`);
+  };
+
+  return (
+    <Nav onSelect={onSelect} onToggle={onToggle}>
+      <NavList>
+        <NavExpandable
+          title="Expandable section title 1"
+          groupId="nav-expand3rd-group-1"
+          isActive={activeGroup === 'nav-expand3rd-group-1'}
+          isExpanded
+        >
+          <NavItem
+            preventDefault
+            id="expandable3rd-1"
+            to="#expandable3rd-1"
+            groupId="nav-expand3rd-group-1"
+            itemId="nav-expand3rd-group-1_item-1"
+            isActive={activeItem === 'nav-expand3rd-group-1_item-1'}
+          >
+            Link 1
+          </NavItem>
+          <NavItem
+            preventDefault
+            id="expandable3rd-2"
+            to="#expandable3rd-2"
+            groupId="nav-expand3rd-group-1"
+            itemId="nav-expand3rd-group-1_item-2"
+            isActive={activeItem === 'nav-expand3rd-group-1_item-2'}
+          >
+            Link 2
+          </NavItem>
+          <NavItem
+            preventDefault
+            id="expandable3rd-3"
+            to="#expandable3rd-3"
+            groupId="nav-expand3rd-group-1"
+            itemId="nav-expand3rd-group-1_item-3"
+            isActive={activeItem === 'nav-expand3rd-group-1_item-3'}
+          >
+            Link 3
+          </NavItem>
+        </NavExpandable>
+        <NavExpandable
+          title="Expandable section title 2"
+          groupId="nav-expand3rd-group-2"
+          isActive={activeGroup === 'nav-expand3rd-group-2'}
+          isExpanded
+        >
+          <NavItem
+            preventDefault
+            id="expandable3rd-4"
+            to="#expandable3rd-4"
+            groupId="nav-expand3rd-group-2"
+            itemId="nav-expand3rd-group-2_item-1"
+            isActive={activeItem === 'nav-expand3rd-group-2_item-1'}
+          >
+            Link 1
+          </NavItem>
+          <NavExpandable
+            title="Expandable third level"
+            groupId="nav-expand3rd-group-3"
+            isActive={activeGroup === 'nav-expand3rd-group-3'}
+            isExpanded
+          >
+            <NavItem
+              preventDefault
+              id="expandable3rd-5"
+              to="#expandable3rd-5"
+              groupId="nav-expand3rd-group-3"
+              itemId="nav-expand3rd-group-3_item-1"
+              isActive={activeItem === 'nav-expand3rd-group-3_item-1'}
+            >
+              Third Level Link 1
+            </NavItem>
+            <NavItem
+              preventDefault
+              id="expandable3rd-6"
+              to="#expandable3rd-6"
+              groupId="nav-expand3rd-group-3"
+              itemId="nav-expand3rd-group-3_item-3"
+              isActive={activeItem === 'nav-expand3rd-group-3_item-2'}
+            >
+              Third Level Link 2
+            </NavItem>
+          </NavExpandable>
+          <NavItem
+            preventDefault
+            id="expandable3rd-7"
+            to="#expandable3rd-7"
+            groupId="nav-expand3rd-group-2"
+            itemId="nav-expand3rd-group-2_item-2"
+            isActive={activeItem === 'nav-expand3rd-group-2_item-2'}
+          >
+            Link 2
+          </NavItem>
+        </NavExpandable>
+      </NavList>
+    </Nav>
+  );
+};
diff --git a/packages/react-core/src/components/Nav/examples/NavFlyout.tsx b/packages/react-core/src/components/Nav/examples/NavFlyout.tsx
new file mode 100644
index 00000000000..b1481aead71
--- /dev/null
+++ b/packages/react-core/src/components/Nav/examples/NavFlyout.tsx
@@ -0,0 +1,102 @@
+import React from 'react';
+import { Nav, NavItem, NavList, Menu, MenuContent, MenuList, MenuItem } from '@patternfly/react-core';
+
+export const NavFlyout: React.FunctionComponent = () => {
+  const [activeItem, setActiveItem] = React.useState('nav-flyout-default-link-1');
+
+  const onSelect = (result: { itemId: number | string }) => {
+    setActiveItem(result.itemId as string);
+  };
+
+  const onMenuSelect = (_event: any, itemId: string | number | undefined) => setActiveItem(itemId as string);
+
+  const onMenuItemClick = (event: any) => {
+    event.preventDefault();
+  };
+
+  const numFlyouts = 5;
+  const FlyoutMenu = ({ depth, children }) => (
+    <Menu key={depth} containsFlyout isNavFlyout id={`nav-flyout-menu-${depth}`} onSelect={onMenuSelect}>
+      <MenuContent>
+        <MenuList>
+          <MenuItem
+            onClick={onMenuItemClick}
+            flyoutMenu={children}
+            itemId={`nav-flyout-next-menu-${depth}`}
+            to={`#next-menu-link-${depth}`}
+          >
+            Next menu
+          </MenuItem>
+          {Array.apply(0, Array(numFlyouts - depth)).map((_item, index: number) => (
+            <MenuItem
+              onClick={onMenuItemClick}
+              key={`${depth}-${index}`}
+              itemId={`nav-flyout-${depth}-${index}`}
+              to={`#menu-link-${depth}-${index}`}
+              isActive={activeItem === `nav-flyout-${depth}-${index}`}
+            >
+              Menu {depth} item {index}
+            </MenuItem>
+          ))}
+          <MenuItem
+            onClick={onMenuItemClick}
+            flyoutMenu={children}
+            itemId={`nav-flyout-next-menu-2-${depth}`}
+            to={`#next-menu-2-link-${depth}`}
+          >
+            Next menu
+          </MenuItem>
+        </MenuList>
+      </MenuContent>
+    </Menu>
+  );
+
+  let curFlyout = <FlyoutMenu depth={1}>{null}</FlyoutMenu>;
+  for (let i = 2; i < numFlyouts - 1; i++) {
+    curFlyout = <FlyoutMenu depth={i}>{curFlyout}</FlyoutMenu>;
+  }
+
+  return (
+    <Nav onSelect={onSelect}>
+      <NavList>
+        <NavItem
+          preventDefault
+          id="nav-flyout-default-link-1"
+          to="#nav-flyout-default-link-1"
+          itemId="nav-flyout-default-link-1"
+          isActive={activeItem === 'nav-flyout-default-link-1'}
+        >
+          Link 1
+        </NavItem>
+        <NavItem
+          preventDefault
+          id="nav-flyout-default-link-2"
+          to="#nav-flyout-default-link-2"
+          itemId="nav-flyout-default-link-2"
+          isActive={activeItem === 'nav-flyout-default-link-2'}
+        >
+          Link 2
+        </NavItem>
+        <NavItem
+          preventDefault
+          flyout={curFlyout}
+          id="nav-flyout-default-link-3"
+          to="#nav-flyout-default-link-3"
+          itemId="nav-flyout-default-link-3"
+          isActive={activeItem === 'nav-flyout-default-link-3'}
+        >
+          Link 3
+        </NavItem>
+        <NavItem
+          preventDefault
+          id="nav-flyout-default-link4"
+          to="#nav-flyout-default-link4"
+          itemId="nav-flyout-default-link-4"
+          isActive={activeItem === 'nav-flyout-default-link-4'}
+        >
+          Link 4
+        </NavItem>
+      </NavList>
+    </Nav>
+  );
+};
diff --git a/packages/react-core/src/components/Nav/examples/NavHorizontalPageHeader.tsx b/packages/react-core/src/components/Nav/examples/NavHorizontalPageHeader.tsx
new file mode 100644
index 00000000000..e78ba25ff47
--- /dev/null
+++ b/packages/react-core/src/components/Nav/examples/NavHorizontalPageHeader.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import { Nav, NavItem, NavList, PageHeader } from '@patternfly/react-core';
+
+export const NavHorizontalPageHeader: React.FunctionComponent = () => {
+  const [activeItem, setActiveItem] = React.useState(0);
+
+  const onSelect = (result: { itemId: number | string }) => {
+    setActiveItem(result.itemId as number);
+  };
+
+  const nav = (
+    <Nav onSelect={onSelect} variant="horizontal">
+      <NavList>
+        {Array.apply(0, Array(10)).map(function(_item, index: number) {
+          const num = index + 1;
+          return (
+            <NavItem
+              preventDefault
+              key={num}
+              itemId={num}
+              isActive={activeItem === num}
+              id={`horizontal-pageHeader-${num}`}
+              to={`#horizontal-pageHeader-${num}`}
+            >
+              Horizontal nav item {num}
+            </NavItem>
+          );
+        })}
+      </NavList>
+    </Nav>
+  );
+
+  return <PageHeader topNav={nav} />;
+};
diff --git a/packages/react-core/src/components/Nav/examples/NavHorizontalSubNav.tsx b/packages/react-core/src/components/Nav/examples/NavHorizontalSubNav.tsx
new file mode 100644
index 00000000000..6ded193e06c
--- /dev/null
+++ b/packages/react-core/src/components/Nav/examples/NavHorizontalSubNav.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { Nav, NavItem, NavList } from '@patternfly/react-core';
+
+export const NavHorizontalSubNav: React.FunctionComponent = () => {
+  const [activeItem, setActiveItem] = React.useState(0);
+
+  const onSelect = (result: { itemId: number | string }) => {
+    setActiveItem(result.itemId as number);
+  };
+
+  return (
+    <Nav onSelect={onSelect} variant="horizontal-subnav">
+      <NavList>
+        {Array.apply(0, Array(10)).map(function(_item, index: number) {
+          const num = index + 1;
+          return (
+            <NavItem
+              preventDefault
+              key={num}
+              itemId={num}
+              isActive={activeItem === num}
+              id={`horizontal-subnav-${num}`}
+              to={`#horizontal-subnav-${num}`}
+            >
+              Horizontal nav item {num}
+            </NavItem>
+          );
+        })}
+      </NavList>
+    </Nav>
+  );
+};
diff --git a/packages/react-core/src/components/Nav/examples/NavLegacyTertiary.tsx b/packages/react-core/src/components/Nav/examples/NavLegacyTertiary.tsx
new file mode 100644
index 00000000000..6fbbf54123e
--- /dev/null
+++ b/packages/react-core/src/components/Nav/examples/NavLegacyTertiary.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { Nav, NavItem, NavList } from '@patternfly/react-core';
+
+export const NavLegacyTertiary: React.FunctionComponent = () => {
+  const [activeItem, setActiveItem] = React.useState(0);
+
+  const onSelect = (result: { itemId: number | string }) => {
+    setActiveItem(result.itemId as number);
+  };
+
+  return (
+    <Nav onSelect={onSelect} variant="tertiary">
+      <NavList>
+        {Array.apply(0, Array(10)).map(function(_item, index: number) {
+          const num = index + 1;
+          return (
+            <NavItem
+              preventDefault
+              key={num}
+              itemId={num}
+              isActive={activeItem === num}
+              id={`legacy-tertiary-${num}`}
+              to={`#legacy-tertiary-${num}`}
+            >
+              Horizontal nav item {num}
+            </NavItem>
+          );
+        })}
+      </NavList>
+    </Nav>
+  );
+};
diff --git a/packages/react-core/src/components/Nav/examples/NavMixed.tsx b/packages/react-core/src/components/Nav/examples/NavMixed.tsx
new file mode 100644
index 00000000000..5d97060f8bf
--- /dev/null
+++ b/packages/react-core/src/components/Nav/examples/NavMixed.tsx
@@ -0,0 +1,101 @@
+import React from 'react';
+import { Nav, NavExpandable, NavItem, NavItemSeparator, NavList } from '@patternfly/react-core';
+
+export const NavMixed: React.FunctionComponent = () => {
+  const [activeGroup, setActiveGroup] = React.useState('');
+  const [activeItem, setActiveItem] = React.useState('ungrouped_item-1');
+
+  const onSelect = (result: { itemId: number | string; groupId: number | string | null }) => {
+    setActiveGroup(result.groupId as string);
+    setActiveItem(result.itemId as string);
+  };
+
+  return (
+    <Nav onSelect={onSelect}>
+      <NavList>
+        <NavItem
+          preventDefault
+          id="mixed-1"
+          to="#mixed-1"
+          itemId="ungrouped_item-1"
+          isActive={activeItem === 'ungrouped_item-1'}
+        >
+          Link 1 (not expandable)
+        </NavItem>
+        <NavExpandable
+          title="Expandable section title 1"
+          groupId="nav-mixed-group-1"
+          isActive={activeGroup === 'nav-mixed-group-1'}
+        >
+          <NavItem
+            preventDefault
+            id="mixed-2"
+            to="#mixed-2"
+            groupId="nav-mixed-group-1"
+            itemId="nav-mixed-group-1_item-1"
+            isActive={activeItem === 'nav-mixed-group-1_item-1'}
+          >
+            Link 1
+          </NavItem>
+          <NavItemSeparator />
+          <NavItem
+            preventDefault
+            id="mixed-3"
+            to="#mixed-3"
+            groupId="nav-mixed-group-1"
+            itemId="nav-mixed-group-1_item-2"
+            isActive={activeItem === 'nav-mixed-group-1_item-2'}
+          >
+            Link 2
+          </NavItem>
+          <NavItem
+            preventDefault
+            id="mixed-4"
+            to="#mixed-4"
+            groupId="nav-mixed-group-1"
+            itemId="nav-mixed-group-1_item-3"
+            isActive={activeItem === 'nav-mixed-group-1_item-3'}
+          >
+            Link 3
+          </NavItem>
+        </NavExpandable>
+        <NavExpandable
+          title="Expandable section title 2"
+          groupId="nav-mixed-group-2"
+          isActive={activeGroup === 'nav-mixed-group-2'}
+        >
+          <NavItem
+            preventDefault
+            id="mixed-5"
+            to="#mixed-5"
+            groupId="nav-mixed-group-2"
+            itemId="nav-mixed-group-2_item-1"
+            isActive={activeItem === 'nav-mixed-group-2_item-1'}
+          >
+            Link 1
+          </NavItem>
+          <NavItem
+            preventDefault
+            id="mixed-6"
+            to="#mixed-6"
+            groupId="nav-mixed-group-2"
+            itemId="nav-mixed-group-2_item-2"
+            isActive={activeItem === 'nav-mixed-group-2_item-2'}
+          >
+            Link 2
+          </NavItem>
+          <NavItem
+            preventDefault
+            id="mixed-7"
+            to="#mixed-7"
+            groupId="nav-mixed-group-2"
+            itemId="nav-mixed-group-2_item-3"
+            isActive={activeItem === 'nav-mixed-group-2_item-3'}
+          >
+            Link 3
+          </NavItem>
+        </NavExpandable>
+      </NavList>
+    </Nav>
+  );
+};

From 0fe7625a42ed2f56da283cefd924d5e888e9e1db Mon Sep 17 00:00:00 2001
From: Eric Olkowski <thatblindgeye@gmail.com>
Date: Mon, 18 Jul 2022 10:08:38 -0400
Subject: [PATCH 3/3] Rebase and update

---
 .../src/components/Nav/examples/NavDefault.tsx | 10 +++++-----
 .../components/Nav/examples/NavExpandable.tsx  | 18 +++++++++---------
 .../Nav/examples/NavExpandableThirdLevel.tsx   | 12 ++++++------
 .../src/components/Nav/examples/NavFlyout.tsx  | 10 +++++-----
 .../src/components/Nav/examples/NavGrouped.tsx | 14 +++++++-------
 .../Nav/examples/NavHorizontalPageHeader.tsx   |  2 +-
 .../Nav/examples/NavHorizontalSubNav.tsx       |  4 ++--
 .../Nav/examples/NavLegacyTertiary.tsx         |  4 ++--
 .../src/components/Nav/examples/NavMixed.tsx   | 14 +++++++-------
 9 files changed, 44 insertions(+), 44 deletions(-)

diff --git a/packages/react-core/src/components/Nav/examples/NavDefault.tsx b/packages/react-core/src/components/Nav/examples/NavDefault.tsx
index b5ed481f829..77490f36fe2 100644
--- a/packages/react-core/src/components/Nav/examples/NavDefault.tsx
+++ b/packages/react-core/src/components/Nav/examples/NavDefault.tsx
@@ -9,19 +9,19 @@ export const NavDefault: React.FunctionComponent = () => {
   };
 
   return (
-    <Nav onSelect={onSelect}>
+    <Nav onSelect={onSelect} aria-label="Default global nav">
       <NavList>
         <NavItem preventDefault id="nav-default-link1" to="#nav-default-link1" itemId={0} isActive={activeItem === 0}>
-          Link 1
+          Default Link 1
         </NavItem>
         <NavItem preventDefault id="nav-default-link2" to="#nav-default-link2" itemId={1} isActive={activeItem === 1}>
-          Link 2
+          Default Link 2
         </NavItem>
         <NavItem preventDefault id="nav-default-link3" to="#nav-default-link3" itemId={2} isActive={activeItem === 2}>
-          Link 3
+          Default Link 3
         </NavItem>
         <NavItem preventDefault id="nav-default-link4" to="#nav-default-link4" itemId={3} isActive={activeItem === 3}>
-          Link 4
+          Default Link 4
         </NavItem>
       </NavList>
     </Nav>
diff --git a/packages/react-core/src/components/Nav/examples/NavExpandable.tsx b/packages/react-core/src/components/Nav/examples/NavExpandable.tsx
index 589bbb42b34..fe2c5cc8c27 100644
--- a/packages/react-core/src/components/Nav/examples/NavExpandable.tsx
+++ b/packages/react-core/src/components/Nav/examples/NavExpandable.tsx
@@ -25,10 +25,10 @@ export const NavExpandableExample: React.FunctionComponent = () => {
   };
 
   return (
-    <Nav onSelect={onSelect} onToggle={onToggle}>
+    <Nav onSelect={onSelect} onToggle={onToggle} aria-label="Expandable global nav">
       <NavList>
         <NavExpandable
-          title="Expandable section title 1"
+          title="Expandable Group 1"
           groupId="nav-expandable-group-1"
           isActive={activeGroup === 'nav-expandable-group-1'}
           isExpanded
@@ -41,7 +41,7 @@ export const NavExpandableExample: React.FunctionComponent = () => {
             itemId="nav-expandable-group-1_item-1"
             isActive={activeItem === 'nav-expandable-group-1_item-1'}
           >
-            Link 1
+            Subnav 1 Link 1
           </NavItem>
           <NavItemSeparator />
           <NavItem
@@ -52,7 +52,7 @@ export const NavExpandableExample: React.FunctionComponent = () => {
             itemId="nav-expandable-group-1_item-2"
             isActive={activeItem === 'nav-expandable-group-1_item-2'}
           >
-            Link 2
+            Subnav 1 Link 2
           </NavItem>
           <NavItem
             preventDefault
@@ -62,11 +62,11 @@ export const NavExpandableExample: React.FunctionComponent = () => {
             itemId="nav-expandable-group-1_item-3"
             isActive={activeItem === 'nav-expandable-group-1_item-3'}
           >
-            Link 3
+            Subnav 1 Link 3
           </NavItem>
         </NavExpandable>
         <NavExpandable
-          title="Expandable section title 2"
+          title="Expandable Group 2"
           groupId="nav-expandable-group-2"
           isActive={activeGroup === 'nav-expandable-group-2'}
           isExpanded
@@ -90,7 +90,7 @@ export const NavExpandableExample: React.FunctionComponent = () => {
             itemId="nav-expandable-group-2_item-1"
             isActive={activeItem === 'nav-expandable-group-2_item-1'}
           >
-            Link 1
+            Subnav 2 Link 1
           </NavItem>
           <NavItem
             preventDefault
@@ -100,7 +100,7 @@ export const NavExpandableExample: React.FunctionComponent = () => {
             itemId="nav-expandable-group-2_item-2"
             isActive={activeItem === 'nav-expandable-group-2_item-2'}
           >
-            Link 2
+            Subnav 2 Link 2
           </NavItem>
           <NavItem
             preventDefault
@@ -110,7 +110,7 @@ export const NavExpandableExample: React.FunctionComponent = () => {
             itemId="nav-expandable-group-2_item-3"
             isActive={activeItem === 'nav-expandable-group-2_item-3'}
           >
-            Link 3
+            Subnav 2 Link 3
           </NavItem>
         </NavExpandable>
       </NavList>
diff --git a/packages/react-core/src/components/Nav/examples/NavExpandableThirdLevel.tsx b/packages/react-core/src/components/Nav/examples/NavExpandableThirdLevel.tsx
index 7bb4009aa80..0305b71f30b 100644
--- a/packages/react-core/src/components/Nav/examples/NavExpandableThirdLevel.tsx
+++ b/packages/react-core/src/components/Nav/examples/NavExpandableThirdLevel.tsx
@@ -16,7 +16,7 @@ export const NavExpandableThirdLevel: React.FunctionComponent = () => {
   };
 
   return (
-    <Nav onSelect={onSelect} onToggle={onToggle}>
+    <Nav onSelect={onSelect} onToggle={onToggle} aria-label="Expandable third level global nav">
       <NavList>
         <NavExpandable
           title="Expandable section title 1"
@@ -32,7 +32,7 @@ export const NavExpandableThirdLevel: React.FunctionComponent = () => {
             itemId="nav-expand3rd-group-1_item-1"
             isActive={activeItem === 'nav-expand3rd-group-1_item-1'}
           >
-            Link 1
+            With 3rd 1 Link 1
           </NavItem>
           <NavItem
             preventDefault
@@ -42,7 +42,7 @@ export const NavExpandableThirdLevel: React.FunctionComponent = () => {
             itemId="nav-expand3rd-group-1_item-2"
             isActive={activeItem === 'nav-expand3rd-group-1_item-2'}
           >
-            Link 2
+            With 3rd 1 Link 2
           </NavItem>
           <NavItem
             preventDefault
@@ -52,7 +52,7 @@ export const NavExpandableThirdLevel: React.FunctionComponent = () => {
             itemId="nav-expand3rd-group-1_item-3"
             isActive={activeItem === 'nav-expand3rd-group-1_item-3'}
           >
-            Link 3
+            With 3rd 1 Link 3
           </NavItem>
         </NavExpandable>
         <NavExpandable
@@ -69,7 +69,7 @@ export const NavExpandableThirdLevel: React.FunctionComponent = () => {
             itemId="nav-expand3rd-group-2_item-1"
             isActive={activeItem === 'nav-expand3rd-group-2_item-1'}
           >
-            Link 1
+            With 3rd 2 Link 1
           </NavItem>
           <NavExpandable
             title="Expandable third level"
@@ -106,7 +106,7 @@ export const NavExpandableThirdLevel: React.FunctionComponent = () => {
             itemId="nav-expand3rd-group-2_item-2"
             isActive={activeItem === 'nav-expand3rd-group-2_item-2'}
           >
-            Link 2
+            With 3rd 2 Link 2
           </NavItem>
         </NavExpandable>
       </NavList>
diff --git a/packages/react-core/src/components/Nav/examples/NavFlyout.tsx b/packages/react-core/src/components/Nav/examples/NavFlyout.tsx
index b1481aead71..503b84fe9b0 100644
--- a/packages/react-core/src/components/Nav/examples/NavFlyout.tsx
+++ b/packages/react-core/src/components/Nav/examples/NavFlyout.tsx
@@ -57,7 +57,7 @@ export const NavFlyout: React.FunctionComponent = () => {
   }
 
   return (
-    <Nav onSelect={onSelect}>
+    <Nav onSelect={onSelect} aria-label="Flyout global nav">
       <NavList>
         <NavItem
           preventDefault
@@ -66,7 +66,7 @@ export const NavFlyout: React.FunctionComponent = () => {
           itemId="nav-flyout-default-link-1"
           isActive={activeItem === 'nav-flyout-default-link-1'}
         >
-          Link 1
+          Flyout Link 1
         </NavItem>
         <NavItem
           preventDefault
@@ -75,7 +75,7 @@ export const NavFlyout: React.FunctionComponent = () => {
           itemId="nav-flyout-default-link-2"
           isActive={activeItem === 'nav-flyout-default-link-2'}
         >
-          Link 2
+          Flyout Link 2
         </NavItem>
         <NavItem
           preventDefault
@@ -85,7 +85,7 @@ export const NavFlyout: React.FunctionComponent = () => {
           itemId="nav-flyout-default-link-3"
           isActive={activeItem === 'nav-flyout-default-link-3'}
         >
-          Link 3
+          Flyout Link 3
         </NavItem>
         <NavItem
           preventDefault
@@ -94,7 +94,7 @@ export const NavFlyout: React.FunctionComponent = () => {
           itemId="nav-flyout-default-link-4"
           isActive={activeItem === 'nav-flyout-default-link-4'}
         >
-          Link 4
+          Flyout Link 4
         </NavItem>
       </NavList>
     </Nav>
diff --git a/packages/react-core/src/components/Nav/examples/NavGrouped.tsx b/packages/react-core/src/components/Nav/examples/NavGrouped.tsx
index 9421415462c..fc5029a0085 100644
--- a/packages/react-core/src/components/Nav/examples/NavGrouped.tsx
+++ b/packages/react-core/src/components/Nav/examples/NavGrouped.tsx
@@ -9,7 +9,7 @@ export const NavGrouped: React.FunctionComponent = () => {
   };
 
   return (
-    <Nav onSelect={onSelect}>
+    <Nav onSelect={onSelect} aria-label="Grouped global nav">
       <NavGroup title="Section title 1">
         <NavItem
           preventDefault
@@ -17,7 +17,7 @@ export const NavGrouped: React.FunctionComponent = () => {
           itemId="group-1_item-1"
           isActive={activeItem === 'group-1_item-1'}
         >
-          Link 1
+          Group 1 Link 1
         </NavItem>
         <NavItem
           preventDefault
@@ -25,7 +25,7 @@ export const NavGrouped: React.FunctionComponent = () => {
           itemId="group-1_item-2"
           isActive={activeItem === 'group-1_item-2'}
         >
-          Link 2
+          Group 1 Link 2
         </NavItem>
         <NavItem
           preventDefault
@@ -33,7 +33,7 @@ export const NavGrouped: React.FunctionComponent = () => {
           itemId="group-1_item-3"
           isActive={activeItem === 'group-1_item-3'}
         >
-          Link 3
+          Group 1 Link 3
         </NavItem>
       </NavGroup>
       <NavGroup title="Section title 2">
@@ -43,7 +43,7 @@ export const NavGrouped: React.FunctionComponent = () => {
           itemId="group-2_item-1"
           isActive={activeItem === 'group-2_item-1'}
         >
-          Link 1
+          Group 2 Link 1
         </NavItem>
         <NavItem
           preventDefault
@@ -51,7 +51,7 @@ export const NavGrouped: React.FunctionComponent = () => {
           itemId="group-2_item-2"
           isActive={activeItem === 'group-2_item-2'}
         >
-          Link 2
+          Group 2 Link 2
         </NavItem>
         <NavItem
           preventDefault
@@ -59,7 +59,7 @@ export const NavGrouped: React.FunctionComponent = () => {
           itemId="group-2_item-3"
           isActive={activeItem === 'group-2_item-3'}
         >
-          Link 3
+          Group 2 Link 3
         </NavItem>
       </NavGroup>
     </Nav>
diff --git a/packages/react-core/src/components/Nav/examples/NavHorizontalPageHeader.tsx b/packages/react-core/src/components/Nav/examples/NavHorizontalPageHeader.tsx
index e78ba25ff47..9d1c4009722 100644
--- a/packages/react-core/src/components/Nav/examples/NavHorizontalPageHeader.tsx
+++ b/packages/react-core/src/components/Nav/examples/NavHorizontalPageHeader.tsx
@@ -9,7 +9,7 @@ export const NavHorizontalPageHeader: React.FunctionComponent = () => {
   };
 
   const nav = (
-    <Nav onSelect={onSelect} variant="horizontal">
+    <Nav onSelect={onSelect} variant="horizontal" aria-label="Horizontal global nav">
       <NavList>
         {Array.apply(0, Array(10)).map(function(_item, index: number) {
           const num = index + 1;
diff --git a/packages/react-core/src/components/Nav/examples/NavHorizontalSubNav.tsx b/packages/react-core/src/components/Nav/examples/NavHorizontalSubNav.tsx
index 6ded193e06c..40ed7ebcd7d 100644
--- a/packages/react-core/src/components/Nav/examples/NavHorizontalSubNav.tsx
+++ b/packages/react-core/src/components/Nav/examples/NavHorizontalSubNav.tsx
@@ -9,7 +9,7 @@ export const NavHorizontalSubNav: React.FunctionComponent = () => {
   };
 
   return (
-    <Nav onSelect={onSelect} variant="horizontal-subnav">
+    <Nav onSelect={onSelect} variant="horizontal-subnav" aria-label="Horizontal subnav global nav">
       <NavList>
         {Array.apply(0, Array(10)).map(function(_item, index: number) {
           const num = index + 1;
@@ -22,7 +22,7 @@ export const NavHorizontalSubNav: React.FunctionComponent = () => {
               id={`horizontal-subnav-${num}`}
               to={`#horizontal-subnav-${num}`}
             >
-              Horizontal nav item {num}
+              Horizontal subnav item {num}
             </NavItem>
           );
         })}
diff --git a/packages/react-core/src/components/Nav/examples/NavLegacyTertiary.tsx b/packages/react-core/src/components/Nav/examples/NavLegacyTertiary.tsx
index 6fbbf54123e..d38ec335c22 100644
--- a/packages/react-core/src/components/Nav/examples/NavLegacyTertiary.tsx
+++ b/packages/react-core/src/components/Nav/examples/NavLegacyTertiary.tsx
@@ -9,7 +9,7 @@ export const NavLegacyTertiary: React.FunctionComponent = () => {
   };
 
   return (
-    <Nav onSelect={onSelect} variant="tertiary">
+    <Nav onSelect={onSelect} variant="tertiary" aria-label="Tertiary global nav">
       <NavList>
         {Array.apply(0, Array(10)).map(function(_item, index: number) {
           const num = index + 1;
@@ -22,7 +22,7 @@ export const NavLegacyTertiary: React.FunctionComponent = () => {
               id={`legacy-tertiary-${num}`}
               to={`#legacy-tertiary-${num}`}
             >
-              Horizontal nav item {num}
+              Tertiary nav item {num}
             </NavItem>
           );
         })}
diff --git a/packages/react-core/src/components/Nav/examples/NavMixed.tsx b/packages/react-core/src/components/Nav/examples/NavMixed.tsx
index 5d97060f8bf..17e5df49c67 100644
--- a/packages/react-core/src/components/Nav/examples/NavMixed.tsx
+++ b/packages/react-core/src/components/Nav/examples/NavMixed.tsx
@@ -11,7 +11,7 @@ export const NavMixed: React.FunctionComponent = () => {
   };
 
   return (
-    <Nav onSelect={onSelect}>
+    <Nav onSelect={onSelect} aria-label="Mixed global nav">
       <NavList>
         <NavItem
           preventDefault
@@ -35,7 +35,7 @@ export const NavMixed: React.FunctionComponent = () => {
             itemId="nav-mixed-group-1_item-1"
             isActive={activeItem === 'nav-mixed-group-1_item-1'}
           >
-            Link 1
+            Mixed Link 1
           </NavItem>
           <NavItemSeparator />
           <NavItem
@@ -46,7 +46,7 @@ export const NavMixed: React.FunctionComponent = () => {
             itemId="nav-mixed-group-1_item-2"
             isActive={activeItem === 'nav-mixed-group-1_item-2'}
           >
-            Link 2
+            Mixed Link 2
           </NavItem>
           <NavItem
             preventDefault
@@ -56,7 +56,7 @@ export const NavMixed: React.FunctionComponent = () => {
             itemId="nav-mixed-group-1_item-3"
             isActive={activeItem === 'nav-mixed-group-1_item-3'}
           >
-            Link 3
+            Mixed Link 3
           </NavItem>
         </NavExpandable>
         <NavExpandable
@@ -72,7 +72,7 @@ export const NavMixed: React.FunctionComponent = () => {
             itemId="nav-mixed-group-2_item-1"
             isActive={activeItem === 'nav-mixed-group-2_item-1'}
           >
-            Link 1
+            Mixed 2 Link 1
           </NavItem>
           <NavItem
             preventDefault
@@ -82,7 +82,7 @@ export const NavMixed: React.FunctionComponent = () => {
             itemId="nav-mixed-group-2_item-2"
             isActive={activeItem === 'nav-mixed-group-2_item-2'}
           >
-            Link 2
+            Mixed 2 Link 2
           </NavItem>
           <NavItem
             preventDefault
@@ -92,7 +92,7 @@ export const NavMixed: React.FunctionComponent = () => {
             itemId="nav-mixed-group-2_item-3"
             isActive={activeItem === 'nav-mixed-group-2_item-3'}
           >
-            Link 3
+            Mixed 2 Link 3
           </NavItem>
         </NavExpandable>
       </NavList>