From dba392d62011b1adc38ab0d22a2ad91e0e7d2a2e Mon Sep 17 00:00:00 2001
From: Titani Labaj <39532947+tlabaj@users.noreply.github.com>
Date: Tue, 16 Jan 2024 16:48:33 -0500
Subject: [PATCH] feat(Navigation): Penta updates for nav (#9948)

* feat(Navigation): Penta updates for nav
---
 packages/react-core/package.json              |   2 +-
 .../react-core/src/components/Nav/Nav.tsx     |  16 +-
 .../src/components/Nav/NavExpandable.tsx      |   1 -
 .../react-core/src/components/Nav/NavItem.tsx |   6 +-
 .../react-core/src/components/Nav/NavList.tsx |  45 +-
 .../__snapshots__/NavExpandable.test.tsx.snap |   2 +-
 .../src/components/Nav/__tests__/Nav.test.tsx |  34 +-
 .../__tests__/__snapshots__/Nav.test.tsx.snap | 518 ++++++------------
 .../src/components/Nav/examples/Nav.md        |   6 -
 .../components/Nav/examples/NavExpandable.tsx |   3 +-
 .../Nav/examples/NavLegacyTertiary.tsx        |  32 --
 .../src/components/Nav/examples/nav.css       |  14 -
 .../react-core/src/components/Page/Page.tsx   |  32 +-
 .../components/Page/__tests__/Page.test.tsx   |  10 +-
 .../__snapshots__/Page.test.tsx.snap          | 284 ++++++----
 .../src/components/Page/examples/Page.md      |  12 +-
 .../Page/examples/PageGroupSection.tsx        |   2 +-
 .../Page/examples/PageTertiaryNav.tsx         |  41 --
 packages/react-core/src/demos/Nav.md          |  10 -
 ...stheadWithUtilitiesAndUserDropdownMenu.tsx |   3 +-
 .../examples/Nav/deprecated/NavLight.tsx      |  95 ----
 .../examples/Nav/deprecated/NavTertiary.tsx   |  91 ---
 packages/react-docs/package.json              |   2 +-
 packages/react-icons/package.json             |   2 +-
 .../cypress/integration/nav.spec.ts           |  18 -
 .../src/components/demos/NavDemo/NavDemo.tsx  |  41 +-
 packages/react-styles/package.json            |   2 +-
 packages/react-tokens/package.json            |   2 +-
 yarn.lock                                     |   8 +-
 29 files changed, 408 insertions(+), 926 deletions(-)
 delete mode 100644 packages/react-core/src/components/Nav/examples/NavLegacyTertiary.tsx
 delete mode 100644 packages/react-core/src/components/Page/examples/PageTertiaryNav.tsx
 delete mode 100644 packages/react-core/src/demos/examples/Nav/deprecated/NavLight.tsx
 delete mode 100644 packages/react-core/src/demos/examples/Nav/deprecated/NavTertiary.tsx

diff --git a/packages/react-core/package.json b/packages/react-core/package.json
index f5a8c4cb903..03cdc95646b 100644
--- a/packages/react-core/package.json
+++ b/packages/react-core/package.json
@@ -54,7 +54,7 @@
     "tslib": "^2.5.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.0.0-alpha.49",
+    "@patternfly/patternfly": "6.0.0-alpha.51",
     "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-node-resolve": "^15.0.2",
     "@rollup/plugin-replace": "^5.0.2",
diff --git a/packages/react-core/src/components/Nav/Nav.tsx b/packages/react-core/src/components/Nav/Nav.tsx
index 6fe6eb9ca73..b0cd44730ed 100644
--- a/packages/react-core/src/components/Nav/Nav.tsx
+++ b/packages/react-core/src/components/Nav/Nav.tsx
@@ -35,10 +35,8 @@ export interface NavProps
   ) => void;
   /** Accessible label for the nav when there are multiple navs on the page */
   'aria-label'?: string;
-  /** Indicates which theme color to use */
-  theme?: 'dark' | 'light';
   /** For horizontal navs */
-  variant?: 'default' | 'horizontal' | 'tertiary' | 'horizontal-subnav';
+  variant?: 'default' | 'horizontal' | 'horizontal-subnav';
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
   ouiaId?: number | string;
   /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
@@ -72,7 +70,6 @@ class Nav extends React.Component<
   static defaultProps: NavProps = {
     onSelect: () => undefined,
     onToggle: () => undefined,
-    theme: 'dark',
     ouiaSafe: true
   };
 
@@ -121,13 +118,12 @@ class Nav extends React.Component<
       onSelect,
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       onToggle,
-      theme,
       ouiaId,
       ouiaSafe,
       variant,
       ...props
     } = this.props;
-    const isHorizontal = ['horizontal', 'tertiary'].includes(variant);
+    const isHorizontal = ['horizontal', 'horizontal-subnav'].includes(variant);
 
     return (
       <NavContext.Provider
@@ -148,7 +144,7 @@ class Nav extends React.Component<
           onToggle: (event: React.MouseEvent<HTMLButtonElement>, groupId: number | string, expanded: boolean) =>
             this.onToggle(event, groupId, expanded),
           updateIsScrollable: (isScrollable: boolean) => this.setState({ isScrollable }),
-          isHorizontal: ['horizontal', 'tertiary', 'horizontal-subnav'].includes(variant),
+          isHorizontal: ['horizontal', 'horizontal-subnav'].includes(variant),
           flyoutRef: this.state.flyoutRef,
           setFlyoutRef: (flyoutRef) => this.setState({ flyoutRef }),
           navRef: this.navRef
@@ -157,14 +153,12 @@ class Nav extends React.Component<
         <nav
           className={css(
             styles.nav,
-            theme === 'light' && styles.modifiers.light,
             isHorizontal && styles.modifiers.horizontal,
-            variant === 'tertiary' && styles.modifiers.tertiary,
-            variant === 'horizontal-subnav' && styles.modifiers.horizontalSubnav,
+            variant === 'horizontal-subnav' && styles.modifiers.subnav,
             this.state.isScrollable && styles.modifiers.scrollable,
             className
           )}
-          aria-label={ariaLabel || (['tertiary', 'horizontal-subnav'].includes(variant) ? 'Local' : 'Global')}
+          aria-label={ariaLabel || (variant === 'horizontal-subnav' ? 'Local' : 'Global')}
           ref={this.navRef}
           {...getOUIAProps(Nav.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe)}
           {...props}
diff --git a/packages/react-core/src/components/Nav/NavExpandable.tsx b/packages/react-core/src/components/Nav/NavExpandable.tsx
index 624750b4327..f0381cd32b4 100644
--- a/packages/react-core/src/components/Nav/NavExpandable.tsx
+++ b/packages/react-core/src/components/Nav/NavExpandable.tsx
@@ -115,7 +115,6 @@ class NavExpandable extends React.Component<NavExpandableProps, NavExpandableSta
           <li
             className={css(
               styles.navItem,
-              styles.modifiers.expandable,
               expandedState && styles.modifiers.expanded,
               isActive && styles.modifiers.current,
               className
diff --git a/packages/react-core/src/components/Nav/NavItem.tsx b/packages/react-core/src/components/Nav/NavItem.tsx
index 6f76283f7ff..0df66acc128 100644
--- a/packages/react-core/src/components/Nav/NavItem.tsx
+++ b/packages/react-core/src/components/Nav/NavItem.tsx
@@ -1,5 +1,7 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Nav/nav';
+import menuStyles from '@patternfly/react-styles/css/components/Menu/menu';
+import dividerStyles from '@patternfly/react-styles/css/components/Divider/divider';
 import { css } from '@patternfly/react-styles';
 import { NavContext, NavSelectClickHandler } from './Nav';
 import { PageSidebarContext } from '../Page/PageSidebar';
@@ -125,7 +127,7 @@ export const NavItem: React.FunctionComponent<NavItemProps> = ({
     // Otherwise, MenuItem should handle closing its flyouts
     if (
       (key === 'Escape' || key === 'ArrowLeft') &&
-      popperRef?.current?.querySelectorAll(`.${styles.menu}`).length === 1
+      popperRef?.current?.querySelectorAll(`.${menuStyles.menu}`).length === 1
     ) {
       if (flyoutVisible) {
         event.stopPropagation();
@@ -151,7 +153,7 @@ export const NavItem: React.FunctionComponent<NavItemProps> = ({
       if (flyoutVisible) {
         const flyoutItems = Array.from(
           (popperRef.current as HTMLElement).getElementsByTagName('UL')[0].children
-        ).filter((el) => !(el.classList.contains('pf-m-disabled') || el.classList.contains(styles.divider)));
+        ).filter((el) => !(el.classList.contains('pf-m-disabled') || el.classList.contains(dividerStyles.divider)));
         (flyoutItems[0].firstChild as HTMLElement).focus();
       } else {
         flyoutTarget.focus();
diff --git a/packages/react-core/src/components/Nav/NavList.tsx b/packages/react-core/src/components/Nav/NavList.tsx
index 60f7dd63174..a2ea70b7595 100644
--- a/packages/react-core/src/components/Nav/NavList.tsx
+++ b/packages/react-core/src/components/Nav/NavList.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Nav/nav';
 import { css } from '@patternfly/react-styles';
+import { Button } from '../Button';
 import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import { getLanguageDirection, isElementInView } from '../../helpers/util';
@@ -143,15 +144,19 @@ class NavList extends React.Component<NavListProps> {
             {({ isSidebarOpen }) => (
               <React.Fragment>
                 {isHorizontal && (
-                  <button
-                    className={css(styles.navScrollButton)}
-                    aria-label={backScrollAriaLabel || ariaLeftScroll}
-                    onClick={this.scrollBack}
-                    disabled={scrollViewAtStart}
-                    tabIndex={isSidebarOpen ? null : -1}
-                  >
-                    <AngleLeftIcon />
-                  </button>
+                  <div className={css(styles.navScrollButton)}>
+                    <Button
+                      variant="plain"
+                      aria-label={backScrollAriaLabel || ariaLeftScroll}
+                      onClick={this.scrollBack}
+                      disabled={scrollViewAtStart}
+                      tabIndex={isSidebarOpen ? null : -1}
+                    >
+                      <span className={css(styles.buttonIcon)}>
+                        <AngleLeftIcon />
+                      </span>
+                    </Button>
+                  </div>
                 )}
                 <ul
                   ref={this.navList}
@@ -163,15 +168,19 @@ class NavList extends React.Component<NavListProps> {
                   {children}
                 </ul>
                 {isHorizontal && (
-                  <button
-                    className={css(styles.navScrollButton)}
-                    aria-label={forwardScrollAriaLabel || ariaRightScroll}
-                    onClick={this.scrollForward}
-                    disabled={scrollViewAtEnd}
-                    tabIndex={isSidebarOpen ? null : -1}
-                  >
-                    <AngleRightIcon />
-                  </button>
+                  <div className={css(styles.navScrollButton)}>
+                    <Button
+                      variant="plain"
+                      aria-label={forwardScrollAriaLabel || ariaRightScroll}
+                      onClick={this.scrollForward}
+                      disabled={scrollViewAtEnd}
+                      tabIndex={isSidebarOpen ? null : -1}
+                    >
+                      <span className={css(styles.buttonIcon)}>
+                        <AngleRightIcon />
+                      </span>
+                    </Button>
+                  </div>
                 )}
               </React.Fragment>
             )}
diff --git a/packages/react-core/src/components/Nav/__tests__/Generated/__snapshots__/NavExpandable.test.tsx.snap b/packages/react-core/src/components/Nav/__tests__/Generated/__snapshots__/NavExpandable.test.tsx.snap
index d77dc06703e..4bfb84cfb05 100644
--- a/packages/react-core/src/components/Nav/__tests__/Generated/__snapshots__/NavExpandable.test.tsx.snap
+++ b/packages/react-core/src/components/Nav/__tests__/Generated/__snapshots__/NavExpandable.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`NavExpandable should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <li
-    class="pf-v5-c-nav__item pf-m-expandable ''"
+    class="pf-v5-c-nav__item ''"
     data-ouia-component-id="OUIA-Generated-NavExpandable-1"
     data-ouia-component-type="PF5/NavExpandable"
     data-ouia-safe="true"
diff --git a/packages/react-core/src/components/Nav/__tests__/Nav.test.tsx b/packages/react-core/src/components/Nav/__tests__/Nav.test.tsx
index cfe972719eb..28338dfedc5 100644
--- a/packages/react-core/src/components/Nav/__tests__/Nav.test.tsx
+++ b/packages/react-core/src/components/Nav/__tests__/Nav.test.tsx
@@ -60,21 +60,6 @@ describe('Nav', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  test('Dark Nav List', () => {
-    const { asFragment } = renderNav(
-      <Nav className="test=nav-class" theme="dark">
-        <NavList className="test-nav-list-class">
-          {props.items.map((item) => (
-            <NavItem to={item.to} key={item.to} className="test-nav-item-class">
-              {item.label}
-            </NavItem>
-          ))}
-        </NavList>
-      </Nav>
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
   test('Default Nav List - Trigger item active update', async () => {
     const user = userEvent.setup();
 
@@ -228,24 +213,9 @@ describe('Nav', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  test('Tertiary Nav List', () => {
-    const { asFragment } = renderNav(
-      <Nav variant="tertiary">
-        <NavList>
-          {props.items.map((item) => (
-            <NavItem to={item.to} key={item.to}>
-              {item.label}
-            </NavItem>
-          ))}
-        </NavList>
-      </Nav>
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
   test('Nav List with custom item nodes', () => {
     const { asFragment } = renderNav(
-      <Nav variant="tertiary">
+      <Nav>
         <NavList>
           <NavItem to="/components/nav#link1" className="test-nav-item-class">
             <div className="my-custom-node">My custom node</div>
@@ -260,7 +230,7 @@ describe('Nav', () => {
     const user = userEvent.setup();
 
     const { asFragment } = renderNav(
-      <Nav variant="tertiary">
+      <Nav>
         <NavList>
           <NavItem className="test-nav-item-class" flyout={<div>Flyout test</div>}>
             <div className="my-custom-node">My custom node</div>
diff --git a/packages/react-core/src/components/Nav/__tests__/__snapshots__/Nav.test.tsx.snap b/packages/react-core/src/components/Nav/__tests__/__snapshots__/Nav.test.tsx.snap
index dce2e3c6f9f..a6e5c614907 100644
--- a/packages/react-core/src/components/Nav/__tests__/__snapshots__/Nav.test.tsx.snap
+++ b/packages/react-core/src/components/Nav/__tests__/__snapshots__/Nav.test.tsx.snap
@@ -1,81 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Nav Dark Nav List 1`] = `
-<DocumentFragment>
-  <nav
-    aria-label="Global"
-    class="pf-v5-c-nav test=nav-class"
-    data-ouia-component-id="OUIA-Generated-Nav-4"
-    data-ouia-component-type="PF5/Nav"
-    data-ouia-safe="true"
-  >
-    <ul
-      class="pf-v5-c-nav__list test-nav-list-class"
-      role="list"
-    >
-      <li
-        class="pf-v5-c-nav__item test-nav-item-class"
-        data-ouia-component-id="OUIA-Generated-NavItem-13"
-        data-ouia-component-type="PF5/NavItem"
-        data-ouia-safe="true"
-      >
-        <a
-          class="pf-v5-c-nav__link test-nav-item-class"
-          href="#link1"
-        >
-          Link 1
-        </a>
-      </li>
-      <li
-        class="pf-v5-c-nav__item test-nav-item-class"
-        data-ouia-component-id="OUIA-Generated-NavItem-14"
-        data-ouia-component-type="PF5/NavItem"
-        data-ouia-safe="true"
-      >
-        <a
-          class="pf-v5-c-nav__link test-nav-item-class"
-          href="#link2"
-        >
-          Link 2
-        </a>
-      </li>
-      <li
-        class="pf-v5-c-nav__item test-nav-item-class"
-        data-ouia-component-id="OUIA-Generated-NavItem-15"
-        data-ouia-component-type="PF5/NavItem"
-        data-ouia-safe="true"
-      >
-        <a
-          class="pf-v5-c-nav__link test-nav-item-class"
-          href="#link3"
-        >
-          Link 3
-        </a>
-      </li>
-      <li
-        class="pf-v5-c-nav__item test-nav-item-class"
-        data-ouia-component-id="OUIA-Generated-NavItem-16"
-        data-ouia-component-type="PF5/NavItem"
-        data-ouia-safe="true"
-      >
-        <a
-          class="pf-v5-c-nav__link test-nav-item-class"
-          href="#link4"
-        >
-          Link 4
-        </a>
-      </li>
-    </ul>
-  </nav>
-</DocumentFragment>
-`;
-
 exports[`Nav Default Nav List - Trigger item active update 1`] = `
 <DocumentFragment>
   <nav
     aria-label="Global"
     class="pf-v5-c-nav"
-    data-ouia-component-id="OUIA-Generated-Nav-5"
+    data-ouia-component-id="OUIA-Generated-Nav-4"
     data-ouia-component-type="PF5/Nav"
     data-ouia-safe="true"
   >
@@ -85,7 +15,7 @@ exports[`Nav Default Nav List - Trigger item active update 1`] = `
     >
       <li
         class="pf-v5-c-nav__item"
-        data-ouia-component-id="OUIA-Generated-NavItem-17"
+        data-ouia-component-id="OUIA-Generated-NavItem-13"
         data-ouia-component-type="PF5/NavItem"
         data-ouia-safe="true"
       >
@@ -98,7 +28,7 @@ exports[`Nav Default Nav List - Trigger item active update 1`] = `
       </li>
       <li
         class="pf-v5-c-nav__item"
-        data-ouia-component-id="OUIA-Generated-NavItem-18"
+        data-ouia-component-id="OUIA-Generated-NavItem-14"
         data-ouia-component-type="PF5/NavItem"
         data-ouia-safe="true"
       >
@@ -111,7 +41,7 @@ exports[`Nav Default Nav List - Trigger item active update 1`] = `
       </li>
       <li
         class="pf-v5-c-nav__item"
-        data-ouia-component-id="OUIA-Generated-NavItem-19"
+        data-ouia-component-id="OUIA-Generated-NavItem-15"
         data-ouia-component-type="PF5/NavItem"
         data-ouia-safe="true"
       >
@@ -124,7 +54,7 @@ exports[`Nav Default Nav List - Trigger item active update 1`] = `
       </li>
       <li
         class="pf-v5-c-nav__item"
-        data-ouia-component-id="OUIA-Generated-NavItem-20"
+        data-ouia-component-id="OUIA-Generated-NavItem-16"
         data-ouia-component-type="PF5/NavItem"
         data-ouia-safe="true"
       >
@@ -224,7 +154,7 @@ exports[`Nav Expandable Nav List - Trigger toggle 1`] = `
       role="list"
     >
       <li
-        class="pf-v5-c-nav__item pf-m-expandable expandable-group"
+        class="pf-v5-c-nav__item expandable-group"
         data-ouia-component-id="OUIA-Generated-NavExpandable-1"
         data-ouia-component-type="PF5/NavExpandable"
         data-ouia-safe="true"
@@ -331,7 +261,7 @@ exports[`Nav Expandable Nav List 1`] = `
   <nav
     aria-label="Global"
     class="pf-v5-c-nav"
-    data-ouia-component-id="OUIA-Generated-Nav-6"
+    data-ouia-component-id="OUIA-Generated-Nav-5"
     data-ouia-component-type="PF5/Nav"
     data-ouia-safe="true"
   >
@@ -340,7 +270,7 @@ exports[`Nav Expandable Nav List 1`] = `
       role="list"
     >
       <li
-        class="pf-v5-c-nav__item pf-m-expandable"
+        class="pf-v5-c-nav__item"
         data-ouia-component-id="OUIA-Generated-NavExpandable-1"
         data-ouia-component-type="PF5/NavExpandable"
         data-ouia-safe="true"
@@ -384,7 +314,7 @@ exports[`Nav Expandable Nav List 1`] = `
           >
             <li
               class="pf-v5-c-nav__item"
-              data-ouia-component-id="OUIA-Generated-NavItem-21"
+              data-ouia-component-id="OUIA-Generated-NavItem-17"
               data-ouia-component-type="PF5/NavItem"
               data-ouia-safe="true"
             >
@@ -397,7 +327,7 @@ exports[`Nav Expandable Nav List 1`] = `
             </li>
             <li
               class="pf-v5-c-nav__item"
-              data-ouia-component-id="OUIA-Generated-NavItem-22"
+              data-ouia-component-id="OUIA-Generated-NavItem-18"
               data-ouia-component-type="PF5/NavItem"
               data-ouia-safe="true"
             >
@@ -410,7 +340,7 @@ exports[`Nav Expandable Nav List 1`] = `
             </li>
             <li
               class="pf-v5-c-nav__item"
-              data-ouia-component-id="OUIA-Generated-NavItem-23"
+              data-ouia-component-id="OUIA-Generated-NavItem-19"
               data-ouia-component-type="PF5/NavItem"
               data-ouia-safe="true"
             >
@@ -423,7 +353,7 @@ exports[`Nav Expandable Nav List 1`] = `
             </li>
             <li
               class="pf-v5-c-nav__item"
-              data-ouia-component-id="OUIA-Generated-NavItem-24"
+              data-ouia-component-id="OUIA-Generated-NavItem-20"
               data-ouia-component-type="PF5/NavItem"
               data-ouia-safe="true"
             >
@@ -447,7 +377,7 @@ exports[`Nav Expandable Nav List with aria label 1`] = `
   <nav
     aria-label="Test"
     class="pf-v5-c-nav"
-    data-ouia-component-id="OUIA-Generated-Nav-8"
+    data-ouia-component-id="OUIA-Generated-Nav-7"
     data-ouia-component-type="PF5/Nav"
     data-ouia-safe="true"
   >
@@ -456,7 +386,7 @@ exports[`Nav Expandable Nav List with aria label 1`] = `
       role="list"
     >
       <li
-        class="pf-v5-c-nav__item pf-m-expandable"
+        class="pf-v5-c-nav__item"
         data-ouia-component-id="OUIA-Generated-NavExpandable-3"
         data-ouia-component-type="PF5/NavExpandable"
         data-ouia-safe="true"
@@ -505,7 +435,7 @@ exports[`Nav Expandable Nav List with aria label 1`] = `
           >
             <li
               class="pf-v5-c-nav__item"
-              data-ouia-component-id="OUIA-Generated-NavItem-29"
+              data-ouia-component-id="OUIA-Generated-NavItem-25"
               data-ouia-component-type="PF5/NavItem"
               data-ouia-safe="true"
             >
@@ -518,7 +448,7 @@ exports[`Nav Expandable Nav List with aria label 1`] = `
             </li>
             <li
               class="pf-v5-c-nav__item"
-              data-ouia-component-id="OUIA-Generated-NavItem-30"
+              data-ouia-component-id="OUIA-Generated-NavItem-26"
               data-ouia-component-type="PF5/NavItem"
               data-ouia-safe="true"
             >
@@ -531,7 +461,7 @@ exports[`Nav Expandable Nav List with aria label 1`] = `
             </li>
             <li
               class="pf-v5-c-nav__item"
-              data-ouia-component-id="OUIA-Generated-NavItem-31"
+              data-ouia-component-id="OUIA-Generated-NavItem-27"
               data-ouia-component-type="PF5/NavItem"
               data-ouia-safe="true"
             >
@@ -544,7 +474,7 @@ exports[`Nav Expandable Nav List with aria label 1`] = `
             </li>
             <li
               class="pf-v5-c-nav__item"
-              data-ouia-component-id="OUIA-Generated-NavItem-32"
+              data-ouia-component-id="OUIA-Generated-NavItem-28"
               data-ouia-component-type="PF5/NavItem"
               data-ouia-safe="true"
             >
@@ -572,32 +502,44 @@ exports[`Nav Horizontal Nav List 1`] = `
     data-ouia-component-type="PF5/Nav"
     data-ouia-safe="true"
   >
-    <button
-      aria-label="Scroll back"
+    <div
       class="pf-v5-c-nav__scroll-button"
-      disabled=""
     >
-      <svg
-        aria-hidden="true"
-        class="pf-v5-svg"
-        fill="currentColor"
-        height="1em"
-        role="img"
-        viewBox="0 0 256 512"
-        width="1em"
+      <button
+        aria-disabled="false"
+        aria-label="Scroll back"
+        class="pf-v5-c-button pf-m-plain"
+        data-ouia-component-id="OUIA-Generated-Button-plain-1"
+        data-ouia-component-type="PF5/Button"
+        data-ouia-safe="true"
+        type="button"
       >
-        <path
-          d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
-        />
-      </svg>
-    </button>
+        <span
+          class="pf-v5-c-button__icon"
+        >
+          <svg
+            aria-hidden="true"
+            class="pf-v5-svg"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            viewBox="0 0 256 512"
+            width="1em"
+          >
+            <path
+              d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
+            />
+          </svg>
+        </span>
+      </button>
+    </div>
     <ul
       class="pf-v5-c-nav__list"
       role="list"
     >
       <li
         class="pf-v5-c-nav__item"
-        data-ouia-component-id="OUIA-Generated-NavItem-41"
+        data-ouia-component-id="OUIA-Generated-NavItem-37"
         data-ouia-component-type="PF5/NavItem"
         data-ouia-safe="true"
       >
@@ -610,7 +552,7 @@ exports[`Nav Horizontal Nav List 1`] = `
       </li>
       <li
         class="pf-v5-c-nav__item"
-        data-ouia-component-id="OUIA-Generated-NavItem-42"
+        data-ouia-component-id="OUIA-Generated-NavItem-38"
         data-ouia-component-type="PF5/NavItem"
         data-ouia-safe="true"
       >
@@ -623,7 +565,7 @@ exports[`Nav Horizontal Nav List 1`] = `
       </li>
       <li
         class="pf-v5-c-nav__item"
-        data-ouia-component-id="OUIA-Generated-NavItem-43"
+        data-ouia-component-id="OUIA-Generated-NavItem-39"
         data-ouia-component-type="PF5/NavItem"
         data-ouia-safe="true"
       >
@@ -636,7 +578,7 @@ exports[`Nav Horizontal Nav List 1`] = `
       </li>
       <li
         class="pf-v5-c-nav__item"
-        data-ouia-component-id="OUIA-Generated-NavItem-44"
+        data-ouia-component-id="OUIA-Generated-NavItem-40"
         data-ouia-component-type="PF5/NavItem"
         data-ouia-safe="true"
       >
@@ -648,25 +590,37 @@ exports[`Nav Horizontal Nav List 1`] = `
         </a>
       </li>
     </ul>
-    <button
-      aria-label="Scroll foward"
+    <div
       class="pf-v5-c-nav__scroll-button"
-      disabled=""
     >
-      <svg
-        aria-hidden="true"
-        class="pf-v5-svg"
-        fill="currentColor"
-        height="1em"
-        role="img"
-        viewBox="0 0 256 512"
-        width="1em"
+      <button
+        aria-disabled="false"
+        aria-label="Scroll foward"
+        class="pf-v5-c-button pf-m-plain"
+        data-ouia-component-id="OUIA-Generated-Button-plain-2"
+        data-ouia-component-type="PF5/Button"
+        data-ouia-safe="true"
+        type="button"
       >
-        <path
-          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-        />
-      </svg>
-    </button>
+        <span
+          class="pf-v5-c-button__icon"
+        >
+          <svg
+            aria-hidden="true"
+            class="pf-v5-svg"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            viewBox="0 0 256 512"
+            width="1em"
+          >
+            <path
+              d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+            />
+          </svg>
+        </span>
+      </button>
+    </div>
   </nav>
 </DocumentFragment>
 `;
@@ -675,37 +629,49 @@ exports[`Nav Horizontal SubNav List 1`] = `
 <DocumentFragment>
   <nav
     aria-label="Local"
-    class="pf-v5-c-nav pf-m-horizontal-subnav"
+    class="pf-v5-c-nav pf-m-horizontal pf-m-subnav"
     data-ouia-component-id="OUIA-Generated-Nav-horizontal-subnav-1"
     data-ouia-component-type="PF5/Nav"
     data-ouia-safe="true"
   >
-    <button
-      aria-label="Scroll back"
+    <div
       class="pf-v5-c-nav__scroll-button"
-      disabled=""
     >
-      <svg
-        aria-hidden="true"
-        class="pf-v5-svg"
-        fill="currentColor"
-        height="1em"
-        role="img"
-        viewBox="0 0 256 512"
-        width="1em"
+      <button
+        aria-disabled="false"
+        aria-label="Scroll back"
+        class="pf-v5-c-button pf-m-plain"
+        data-ouia-component-id="OUIA-Generated-Button-plain-3"
+        data-ouia-component-type="PF5/Button"
+        data-ouia-safe="true"
+        type="button"
       >
-        <path
-          d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
-        />
-      </svg>
-    </button>
+        <span
+          class="pf-v5-c-button__icon"
+        >
+          <svg
+            aria-hidden="true"
+            class="pf-v5-svg"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            viewBox="0 0 256 512"
+            width="1em"
+          >
+            <path
+              d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
+            />
+          </svg>
+        </span>
+      </button>
+    </div>
     <ul
       class="pf-v5-c-nav__list"
       role="list"
     >
       <li
         class="pf-v5-c-nav__item"
-        data-ouia-component-id="OUIA-Generated-NavItem-45"
+        data-ouia-component-id="OUIA-Generated-NavItem-41"
         data-ouia-component-type="PF5/NavItem"
         data-ouia-safe="true"
       >
@@ -718,7 +684,7 @@ exports[`Nav Horizontal SubNav List 1`] = `
       </li>
       <li
         class="pf-v5-c-nav__item"
-        data-ouia-component-id="OUIA-Generated-NavItem-46"
+        data-ouia-component-id="OUIA-Generated-NavItem-42"
         data-ouia-component-type="PF5/NavItem"
         data-ouia-safe="true"
       >
@@ -731,7 +697,7 @@ exports[`Nav Horizontal SubNav List 1`] = `
       </li>
       <li
         class="pf-v5-c-nav__item"
-        data-ouia-component-id="OUIA-Generated-NavItem-47"
+        data-ouia-component-id="OUIA-Generated-NavItem-43"
         data-ouia-component-type="PF5/NavItem"
         data-ouia-safe="true"
       >
@@ -744,7 +710,7 @@ exports[`Nav Horizontal SubNav List 1`] = `
       </li>
       <li
         class="pf-v5-c-nav__item"
-        data-ouia-component-id="OUIA-Generated-NavItem-48"
+        data-ouia-component-id="OUIA-Generated-NavItem-44"
         data-ouia-component-type="PF5/NavItem"
         data-ouia-safe="true"
       >
@@ -756,25 +722,37 @@ exports[`Nav Horizontal SubNav List 1`] = `
         </a>
       </li>
     </ul>
-    <button
-      aria-label="Scroll foward"
+    <div
       class="pf-v5-c-nav__scroll-button"
-      disabled=""
     >
-      <svg
-        aria-hidden="true"
-        class="pf-v5-svg"
-        fill="currentColor"
-        height="1em"
-        role="img"
-        viewBox="0 0 256 512"
-        width="1em"
+      <button
+        aria-disabled="false"
+        aria-label="Scroll foward"
+        class="pf-v5-c-button pf-m-plain"
+        data-ouia-component-id="OUIA-Generated-Button-plain-4"
+        data-ouia-component-type="PF5/Button"
+        data-ouia-safe="true"
+        type="button"
       >
-        <path
-          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-        />
-      </svg>
-    </button>
+        <span
+          class="pf-v5-c-button__icon"
+        >
+          <svg
+            aria-hidden="true"
+            class="pf-v5-svg"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            viewBox="0 0 256 512"
+            width="1em"
+          >
+            <path
+              d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+            />
+          </svg>
+        </span>
+      </button>
+    </div>
   </nav>
 </DocumentFragment>
 `;
@@ -784,7 +762,7 @@ exports[`Nav Nav Grouped List 1`] = `
   <nav
     aria-label="Global"
     class="pf-v5-c-nav"
-    data-ouia-component-id="OUIA-Generated-Nav-9"
+    data-ouia-component-id="OUIA-Generated-Nav-8"
     data-ouia-component-type="PF5/Nav"
     data-ouia-safe="true"
   >
@@ -808,7 +786,7 @@ exports[`Nav Nav Grouped List 1`] = `
         >
           <li
             class="pf-v5-c-nav__item"
-            data-ouia-component-id="OUIA-Generated-NavItem-33"
+            data-ouia-component-id="OUIA-Generated-NavItem-29"
             data-ouia-component-type="PF5/NavItem"
             data-ouia-safe="true"
           >
@@ -821,7 +799,7 @@ exports[`Nav Nav Grouped List 1`] = `
           </li>
           <li
             class="pf-v5-c-nav__item"
-            data-ouia-component-id="OUIA-Generated-NavItem-34"
+            data-ouia-component-id="OUIA-Generated-NavItem-30"
             data-ouia-component-type="PF5/NavItem"
             data-ouia-safe="true"
           >
@@ -834,7 +812,7 @@ exports[`Nav Nav Grouped List 1`] = `
           </li>
           <li
             class="pf-v5-c-nav__item"
-            data-ouia-component-id="OUIA-Generated-NavItem-35"
+            data-ouia-component-id="OUIA-Generated-NavItem-31"
             data-ouia-component-type="PF5/NavItem"
             data-ouia-safe="true"
           >
@@ -847,7 +825,7 @@ exports[`Nav Nav Grouped List 1`] = `
           </li>
           <li
             class="pf-v5-c-nav__item"
-            data-ouia-component-id="OUIA-Generated-NavItem-36"
+            data-ouia-component-id="OUIA-Generated-NavItem-32"
             data-ouia-component-type="PF5/NavItem"
             data-ouia-safe="true"
           >
@@ -881,7 +859,7 @@ exports[`Nav Nav Grouped List 1`] = `
         >
           <li
             class="pf-v5-c-nav__item"
-            data-ouia-component-id="OUIA-Generated-NavItem-37"
+            data-ouia-component-id="OUIA-Generated-NavItem-33"
             data-ouia-component-type="PF5/NavItem"
             data-ouia-safe="true"
           >
@@ -894,7 +872,7 @@ exports[`Nav Nav Grouped List 1`] = `
           </li>
           <li
             class="pf-v5-c-nav__item"
-            data-ouia-component-id="OUIA-Generated-NavItem-38"
+            data-ouia-component-id="OUIA-Generated-NavItem-34"
             data-ouia-component-type="PF5/NavItem"
             data-ouia-safe="true"
           >
@@ -907,7 +885,7 @@ exports[`Nav Nav Grouped List 1`] = `
           </li>
           <li
             class="pf-v5-c-nav__item"
-            data-ouia-component-id="OUIA-Generated-NavItem-39"
+            data-ouia-component-id="OUIA-Generated-NavItem-35"
             data-ouia-component-type="PF5/NavItem"
             data-ouia-safe="true"
           >
@@ -920,7 +898,7 @@ exports[`Nav Nav Grouped List 1`] = `
           </li>
           <li
             class="pf-v5-c-nav__item"
-            data-ouia-component-id="OUIA-Generated-NavItem-40"
+            data-ouia-component-id="OUIA-Generated-NavItem-36"
             data-ouia-component-type="PF5/NavItem"
             data-ouia-safe="true"
           >
@@ -941,38 +919,19 @@ exports[`Nav Nav Grouped List 1`] = `
 exports[`Nav Nav List with custom item nodes 1`] = `
 <DocumentFragment>
   <nav
-    aria-label="Local"
-    class="pf-v5-c-nav pf-m-horizontal pf-m-tertiary"
-    data-ouia-component-id="OUIA-Generated-Nav-tertiary-2"
+    aria-label="Global"
+    class="pf-v5-c-nav"
+    data-ouia-component-id="OUIA-Generated-Nav-9"
     data-ouia-component-type="PF5/Nav"
     data-ouia-safe="true"
   >
-    <button
-      aria-label="Scroll back"
-      class="pf-v5-c-nav__scroll-button"
-      disabled=""
-    >
-      <svg
-        aria-hidden="true"
-        class="pf-v5-svg"
-        fill="currentColor"
-        height="1em"
-        role="img"
-        viewBox="0 0 256 512"
-        width="1em"
-      >
-        <path
-          d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
-        />
-      </svg>
-    </button>
     <ul
       class="pf-v5-c-nav__list"
       role="list"
     >
       <li
         class="pf-v5-c-nav__item test-nav-item-class"
-        data-ouia-component-id="OUIA-Generated-NavItem-53"
+        data-ouia-component-id="OUIA-Generated-NavItem-45"
         data-ouia-component-type="PF5/NavItem"
         data-ouia-safe="true"
       >
@@ -983,25 +942,6 @@ exports[`Nav Nav List with custom item nodes 1`] = `
         </div>
       </li>
     </ul>
-    <button
-      aria-label="Scroll foward"
-      class="pf-v5-c-nav__scroll-button"
-      disabled=""
-    >
-      <svg
-        aria-hidden="true"
-        class="pf-v5-svg"
-        fill="currentColor"
-        height="1em"
-        role="img"
-        viewBox="0 0 256 512"
-        width="1em"
-      >
-        <path
-          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-        />
-      </svg>
-    </button>
   </nav>
 </DocumentFragment>
 `;
@@ -1009,38 +949,19 @@ exports[`Nav Nav List with custom item nodes 1`] = `
 exports[`Nav Nav List with flyout 1`] = `
 <DocumentFragment>
   <nav
-    aria-label="Local"
-    class="pf-v5-c-nav pf-m-horizontal pf-m-tertiary"
-    data-ouia-component-id="OUIA-Generated-Nav-tertiary-3"
+    aria-label="Global"
+    class="pf-v5-c-nav"
+    data-ouia-component-id="OUIA-Generated-Nav-10"
     data-ouia-component-type="PF5/Nav"
     data-ouia-safe="true"
   >
-    <button
-      aria-label="Scroll back"
-      class="pf-v5-c-nav__scroll-button"
-      disabled=""
-    >
-      <svg
-        aria-hidden="true"
-        class="pf-v5-svg"
-        fill="currentColor"
-        height="1em"
-        role="img"
-        viewBox="0 0 256 512"
-        width="1em"
-      >
-        <path
-          d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
-        />
-      </svg>
-    </button>
     <ul
       class="pf-v5-c-nav__list"
       role="list"
     >
       <li
         class="pf-v5-c-nav__item pf-m-flyout test-nav-item-class"
-        data-ouia-component-id="OUIA-Generated-NavItem-54"
+        data-ouia-component-id="OUIA-Generated-NavItem-46"
         data-ouia-component-type="PF5/NavItem"
         data-ouia-safe="true"
       >
@@ -1072,25 +993,6 @@ exports[`Nav Nav List with flyout 1`] = `
         </div>
       </li>
     </ul>
-    <button
-      aria-label="Scroll foward"
-      class="pf-v5-c-nav__scroll-button"
-      disabled=""
-    >
-      <svg
-        aria-hidden="true"
-        class="pf-v5-svg"
-        fill="currentColor"
-        height="1em"
-        role="img"
-        viewBox="0 0 256 512"
-        width="1em"
-      >
-        <path
-          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-        />
-      </svg>
-    </button>
     <div
       class=""
       data-popper-escaped="true"
@@ -1175,111 +1077,3 @@ exports[`Nav Renders nav list in strict mode 1`] = `
   </nav>
 </DocumentFragment>
 `;
-
-exports[`Nav Tertiary Nav List 1`] = `
-<DocumentFragment>
-  <nav
-    aria-label="Local"
-    class="pf-v5-c-nav pf-m-horizontal pf-m-tertiary"
-    data-ouia-component-id="OUIA-Generated-Nav-tertiary-1"
-    data-ouia-component-type="PF5/Nav"
-    data-ouia-safe="true"
-  >
-    <button
-      aria-label="Scroll back"
-      class="pf-v5-c-nav__scroll-button"
-      disabled=""
-    >
-      <svg
-        aria-hidden="true"
-        class="pf-v5-svg"
-        fill="currentColor"
-        height="1em"
-        role="img"
-        viewBox="0 0 256 512"
-        width="1em"
-      >
-        <path
-          d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
-        />
-      </svg>
-    </button>
-    <ul
-      class="pf-v5-c-nav__list"
-      role="list"
-    >
-      <li
-        class="pf-v5-c-nav__item"
-        data-ouia-component-id="OUIA-Generated-NavItem-49"
-        data-ouia-component-type="PF5/NavItem"
-        data-ouia-safe="true"
-      >
-        <a
-          class="pf-v5-c-nav__link"
-          href="#link1"
-        >
-          Link 1
-        </a>
-      </li>
-      <li
-        class="pf-v5-c-nav__item"
-        data-ouia-component-id="OUIA-Generated-NavItem-50"
-        data-ouia-component-type="PF5/NavItem"
-        data-ouia-safe="true"
-      >
-        <a
-          class="pf-v5-c-nav__link"
-          href="#link2"
-        >
-          Link 2
-        </a>
-      </li>
-      <li
-        class="pf-v5-c-nav__item"
-        data-ouia-component-id="OUIA-Generated-NavItem-51"
-        data-ouia-component-type="PF5/NavItem"
-        data-ouia-safe="true"
-      >
-        <a
-          class="pf-v5-c-nav__link"
-          href="#link3"
-        >
-          Link 3
-        </a>
-      </li>
-      <li
-        class="pf-v5-c-nav__item"
-        data-ouia-component-id="OUIA-Generated-NavItem-52"
-        data-ouia-component-type="PF5/NavItem"
-        data-ouia-safe="true"
-      >
-        <a
-          class="pf-v5-c-nav__link"
-          href="#link4"
-        >
-          Link 4
-        </a>
-      </li>
-    </ul>
-    <button
-      aria-label="Scroll foward"
-      class="pf-v5-c-nav__scroll-button"
-      disabled=""
-    >
-      <svg
-        aria-hidden="true"
-        class="pf-v5-svg"
-        fill="currentColor"
-        height="1em"
-        role="img"
-        viewBox="0 0 256 512"
-        width="1em"
-      >
-        <path
-          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-        />
-      </svg>
-    </button>
-  </nav>
-</DocumentFragment>
-`;
diff --git a/packages/react-core/src/components/Nav/examples/Nav.md b/packages/react-core/src/components/Nav/examples/Nav.md
index 4bc42d77dac..b4698e5deed 100644
--- a/packages/react-core/src/components/Nav/examples/Nav.md
+++ b/packages/react-core/src/components/Nav/examples/Nav.md
@@ -50,12 +50,6 @@ The following example shows two navigation groups, each with a `title` prop pass
 
 ```
 
-### Tertiary (deprecated)
-
-```ts file="./NavLegacyTertiary.tsx" isDeprecated
-
-```
-
 ### 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.
diff --git a/packages/react-core/src/components/Nav/examples/NavExpandable.tsx b/packages/react-core/src/components/Nav/examples/NavExpandable.tsx
index b307b26604d..ee4a3505513 100644
--- a/packages/react-core/src/components/Nav/examples/NavExpandable.tsx
+++ b/packages/react-core/src/components/Nav/examples/NavExpandable.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Nav, NavExpandable, NavItem, NavItemSeparator, NavList } from '@patternfly/react-core';
+import { Nav, NavExpandable, NavItem, NavList } from '@patternfly/react-core';
 
 export const NavExpandableExample: React.FunctionComponent = () => {
   const [activeGroup, setActiveGroup] = React.useState('nav-expandable-group-1');
@@ -49,7 +49,6 @@ export const NavExpandableExample: React.FunctionComponent = () => {
           >
             Subnav 1 Link 1
           </NavItem>
-          <NavItemSeparator />
           <NavItem
             preventDefault
             id="expandable-2"
diff --git a/packages/react-core/src/components/Nav/examples/NavLegacyTertiary.tsx b/packages/react-core/src/components/Nav/examples/NavLegacyTertiary.tsx
deleted file mode 100644
index d097cbd28c7..00000000000
--- a/packages/react-core/src/components/Nav/examples/NavLegacyTertiary.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-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 = (_event: React.FormEvent<HTMLInputElement>, result: { itemId: number | string }) => {
-    setActiveItem(result.itemId as number);
-  };
-
-  return (
-    <Nav onSelect={onSelect} variant="tertiary" aria-label="Tertiary local">
-      <NavList>
-        {Array.from({ length: 10 }).map(function (_value, index) {
-          const num = index + 1;
-          return (
-            <NavItem
-              preventDefault
-              key={num}
-              itemId={num}
-              isActive={activeItem === num}
-              id={`legacy-tertiary-${num}`}
-              to={`#legacy-tertiary-${num}`}
-            >
-              Tertiary nav item {num}
-            </NavItem>
-          );
-        })}
-      </NavList>
-    </Nav>
-  );
-};
diff --git a/packages/react-core/src/components/Nav/examples/nav.css b/packages/react-core/src/components/Nav/examples/nav.css
index f23db7cab7d..cd8dc9aa939 100644
--- a/packages/react-core/src/components/Nav/examples/nav.css
+++ b/packages/react-core/src/components/Nav/examples/nav.css
@@ -1,17 +1,3 @@
-#ws-react-c-navigation-basic,
-#ws-react-c-navigation-grouped,
-#ws-react-c-navigation-default,
-#ws-react-c-navigation-expandable,
-#ws-react-c-navigation-expandable-wsubnavigation-titles,
-#ws-react-c-navigation-mixed,
-#ws-react-c-navigation-expandable-third-level,
-#ws-react-c-navigation-link-text,
-#ws-react-c-navigation-horizontal-subnav,
-#ws-react-c-navigation-flyout,
-#ws-react-c-navigation-drilldown {
-  background-color: var(--pf-v5-global--BackgroundColor--dark-300);
-}
-
 #ws-react-c-navigation-flyout,
 #ws-react-c-navigation-drilldown {
   width: 300px;
diff --git a/packages/react-core/src/components/Page/Page.tsx b/packages/react-core/src/components/Page/Page.tsx
index dc1bead60ee..8ca5c79bb04 100644
--- a/packages/react-core/src/components/Page/Page.tsx
+++ b/packages/react-core/src/components/Page/Page.tsx
@@ -44,8 +44,8 @@ export interface PageProps extends React.HTMLProps<HTMLDivElement> {
    * the sidebar component or add a callback onSidebarToggle function into the Masthead component
    */
   isManagedSidebar?: boolean;
-  /** Flag indicating if tertiary nav width should be limited */
-  isTertiaryNavWidthLimited?: boolean;
+  /** Flag indicating if horizontal sub navigation width should be limited */
+  isHorizontalSubnavWidthLimited?: boolean;
   /**
    * If true, the managed sidebar is initially open for desktop view
    */
@@ -71,12 +71,12 @@ export interface PageProps extends React.HTMLProps<HTMLDivElement> {
   getVerticalBreakpoint?: (height: number | null) => 'default' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
   /** Breadcrumb component for the page */
   breadcrumb?: React.ReactNode;
-  /** Tertiary nav component for the page */
-  tertiaryNav?: React.ReactNode;
+  /** Horizontal sub navigation component for the page */
+  horizontalSubnav?: React.ReactNode;
   /** Accessible label, can be used to name main section */
   mainAriaLabel?: string;
-  /** Flag indicating if the tertiaryNav should be in a group */
-  isTertiaryNavGrouped?: boolean;
+  /** Flag indicating if the horizontal sub navigation should be in a group */
+  isHorizontalSubnavGrouped?: boolean;
   /** Flag indicating if the breadcrumb should be in a group */
   isBreadcrumbGrouped?: boolean;
   /** Additional content of the group */
@@ -219,7 +219,7 @@ class Page extends React.Component<PageProps, PageState> {
       notificationDrawer,
       isNotificationDrawerExpanded,
       onNotificationDrawerExpand,
-      isTertiaryNavWidthLimited,
+      isHorizontalSubnavWidthLimited,
       skipToContent,
       role,
       mainContainerId,
@@ -233,8 +233,8 @@ class Page extends React.Component<PageProps, PageState> {
       mainAriaLabel,
       mainTabIndex,
       mainComponent,
-      tertiaryNav,
-      isTertiaryNavGrouped,
+      horizontalSubnav,
+      isHorizontalSubnavGrouped,
       isBreadcrumbGrouped,
       additionalGroupedContent,
       groupProps,
@@ -254,14 +254,14 @@ class Page extends React.Component<PageProps, PageState> {
     };
 
     let nav = null;
-    if (tertiaryNav && isTertiaryNavWidthLimited) {
+    if (horizontalSubnav && isHorizontalSubnavWidthLimited) {
       nav = (
         <div className={css(styles.pageMainNav, styles.modifiers.limitWidth)}>
-          <div className={css(styles.pageMainBody)}>{tertiaryNav}</div>
+          <div className={css(styles.pageMainBody)}>{horizontalSubnav}</div>
         </div>
       );
-    } else if (tertiaryNav) {
-      nav = <div className={css(styles.pageMainNav)}>{tertiaryNav}</div>;
+    } else if (horizontalSubnav) {
+      nav = <div className={css(styles.pageMainNav)}>{horizontalSubnav}</div>;
     }
 
     const crumb = breadcrumb ? (
@@ -282,11 +282,11 @@ class Page extends React.Component<PageProps, PageState> {
       </section>
     ) : null;
 
-    const isGrouped = isTertiaryNavGrouped || isBreadcrumbGrouped || additionalGroupedContent;
+    const isGrouped = isHorizontalSubnavGrouped || isBreadcrumbGrouped || additionalGroupedContent;
 
     const group = isGrouped ? (
       <PageGroup {...groupProps}>
-        {isTertiaryNavGrouped && nav}
+        {isHorizontalSubnavGrouped && nav}
         {isBreadcrumbGrouped && crumb}
         {additionalGroupedContent}
       </PageGroup>
@@ -304,7 +304,7 @@ class Page extends React.Component<PageProps, PageState> {
         aria-label={mainAriaLabel}
       >
         {group}
-        {!isTertiaryNavGrouped && nav}
+        {!isHorizontalSubnavGrouped && nav}
         {!isBreadcrumbGrouped && crumb}
         {children}
       </Component>
diff --git a/packages/react-core/src/components/Page/__tests__/Page.test.tsx b/packages/react-core/src/components/Page/__tests__/Page.test.tsx
index 761f5fe8d2c..7537cba2499 100644
--- a/packages/react-core/src/components/Page/__tests__/Page.test.tsx
+++ b/packages/react-core/src/components/Page/__tests__/Page.test.tsx
@@ -235,7 +235,7 @@ describe('Page', () => {
     const { asFragment } = render(
       <Page {...props} header={Header} sidebar={Sidebar}>
         <PageNavigation>
-          <Nav aria-label="Nav" variant="tertiary">
+          <Nav aria-label="Nav" variant="horizontal-subnav">
             <NavList>
               <NavItem itemId={0} isActive>
                 System Panel
@@ -273,7 +273,7 @@ describe('Page', () => {
             </Breadcrumb>
           </PageBreadcrumb>
           <PageNavigation>
-            <Nav aria-label="Nav" variant="tertiary">
+            <Nav aria-label="Nav" variant="horizontal-subnav">
               <NavList>
                 <NavItem itemId={0} isActive>
                   System Panel
@@ -310,7 +310,7 @@ describe('Page', () => {
       </PageBreadcrumb>
     );
     const nav = (
-      <Nav aria-label="Nav" variant="tertiary">
+      <Nav aria-label="Nav" variant="horizontal-subnav">
         <NavList>
           <NavItem itemId={0} isActive>
             System Panel
@@ -329,9 +329,9 @@ describe('Page', () => {
         header={Header}
         sidebar={Sidebar}
         breadcrumb={crumb}
-        tertiaryNav={nav}
+        horizontalSubnav={nav}
         isBreadcrumbGrouped
-        isTertiaryNavGrouped
+        isHorizontalSubnavGrouped
         groupProps={{
           stickyOnBreakpoint: { default: 'bottom' },
           hasShadowTop: true,
diff --git a/packages/react-core/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap b/packages/react-core/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap
index 6b5798ff1ca..976d765a81f 100644
--- a/packages/react-core/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap
+++ b/packages/react-core/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap
@@ -536,30 +536,42 @@ exports[`Page Check page to verify grouped nav and breadcrumb - new components s
         >
           <nav
             aria-label="Nav"
-            class="pf-v5-c-nav pf-m-horizontal pf-m-tertiary"
-            data-ouia-component-id="OUIA-Generated-Nav-tertiary-2"
+            class="pf-v5-c-nav pf-m-horizontal pf-m-subnav"
+            data-ouia-component-id="OUIA-Generated-Nav-horizontal-subnav-2"
             data-ouia-component-type="PF5/Nav"
             data-ouia-safe="true"
           >
-            <button
-              aria-label="Scroll back"
+            <div
               class="pf-v5-c-nav__scroll-button"
-              disabled=""
             >
-              <svg
-                aria-hidden="true"
-                class="pf-v5-svg"
-                fill="currentColor"
-                height="1em"
-                role="img"
-                viewBox="0 0 256 512"
-                width="1em"
-              >
-                <path
-                  d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
-                />
-              </svg>
-            </button>
+              <button
+                aria-disabled="false"
+                aria-label="Scroll back"
+                class="pf-v5-c-button pf-m-plain"
+                data-ouia-component-id="OUIA-Generated-Button-plain-3"
+                data-ouia-component-type="PF5/Button"
+                data-ouia-safe="true"
+                type="button"
+              >
+                <span
+                  class="pf-v5-c-button__icon"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v5-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 256 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
+                    />
+                  </svg>
+                </span>
+              </button>
+            </div>
             <ul
               class="pf-v5-c-nav__list"
               role="list"
@@ -626,25 +638,37 @@ exports[`Page Check page to verify grouped nav and breadcrumb - new components s
                 </a>
               </li>
             </ul>
-            <button
-              aria-label="Scroll foward"
+            <div
               class="pf-v5-c-nav__scroll-button"
-              disabled=""
             >
-              <svg
-                aria-hidden="true"
-                class="pf-v5-svg"
-                fill="currentColor"
-                height="1em"
-                role="img"
-                viewBox="0 0 256 512"
-                width="1em"
-              >
-                <path
-                  d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                />
-              </svg>
-            </button>
+              <button
+                aria-disabled="false"
+                aria-label="Scroll foward"
+                class="pf-v5-c-button pf-m-plain"
+                data-ouia-component-id="OUIA-Generated-Button-plain-4"
+                data-ouia-component-type="PF5/Button"
+                data-ouia-safe="true"
+                type="button"
+              >
+                <span
+                  class="pf-v5-c-button__icon"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v5-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 256 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                    />
+                  </svg>
+                </span>
+              </button>
+            </div>
           </nav>
         </div>
       </div>
@@ -704,30 +728,42 @@ exports[`Page Check page to verify grouped nav and breadcrumb - old / props synt
         >
           <nav
             aria-label="Nav"
-            class="pf-v5-c-nav pf-m-horizontal pf-m-tertiary"
-            data-ouia-component-id="OUIA-Generated-Nav-tertiary-3"
+            class="pf-v5-c-nav pf-m-horizontal pf-m-subnav"
+            data-ouia-component-id="OUIA-Generated-Nav-horizontal-subnav-3"
             data-ouia-component-type="PF5/Nav"
             data-ouia-safe="true"
           >
-            <button
-              aria-label="Scroll back"
+            <div
               class="pf-v5-c-nav__scroll-button"
-              disabled=""
             >
-              <svg
-                aria-hidden="true"
-                class="pf-v5-svg"
-                fill="currentColor"
-                height="1em"
-                role="img"
-                viewBox="0 0 256 512"
-                width="1em"
-              >
-                <path
-                  d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
-                />
-              </svg>
-            </button>
+              <button
+                aria-disabled="false"
+                aria-label="Scroll back"
+                class="pf-v5-c-button pf-m-plain"
+                data-ouia-component-id="OUIA-Generated-Button-plain-5"
+                data-ouia-component-type="PF5/Button"
+                data-ouia-safe="true"
+                type="button"
+              >
+                <span
+                  class="pf-v5-c-button__icon"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v5-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 256 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
+                    />
+                  </svg>
+                </span>
+              </button>
+            </div>
             <ul
               class="pf-v5-c-nav__list"
               role="list"
@@ -794,25 +830,37 @@ exports[`Page Check page to verify grouped nav and breadcrumb - old / props synt
                 </a>
               </li>
             </ul>
-            <button
-              aria-label="Scroll foward"
+            <div
               class="pf-v5-c-nav__scroll-button"
-              disabled=""
             >
-              <svg
-                aria-hidden="true"
-                class="pf-v5-svg"
-                fill="currentColor"
-                height="1em"
-                role="img"
-                viewBox="0 0 256 512"
-                width="1em"
-              >
-                <path
-                  d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                />
-              </svg>
-            </button>
+              <button
+                aria-disabled="false"
+                aria-label="Scroll foward"
+                class="pf-v5-c-button pf-m-plain"
+                data-ouia-component-id="OUIA-Generated-Button-plain-6"
+                data-ouia-component-type="PF5/Button"
+                data-ouia-safe="true"
+                type="button"
+              >
+                <span
+                  class="pf-v5-c-button__icon"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v5-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 256 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                    />
+                  </svg>
+                </span>
+              </button>
+            </div>
           </nav>
         </div>
         <section
@@ -974,30 +1022,42 @@ exports[`Page Check page to verify nav is created - PageNavigation syntax 1`] =
       >
         <nav
           aria-label="Nav"
-          class="pf-v5-c-nav pf-m-horizontal pf-m-tertiary"
-          data-ouia-component-id="OUIA-Generated-Nav-tertiary-1"
+          class="pf-v5-c-nav pf-m-horizontal pf-m-subnav"
+          data-ouia-component-id="OUIA-Generated-Nav-horizontal-subnav-1"
           data-ouia-component-type="PF5/Nav"
           data-ouia-safe="true"
         >
-          <button
-            aria-label="Scroll back"
+          <div
             class="pf-v5-c-nav__scroll-button"
-            disabled=""
           >
-            <svg
-              aria-hidden="true"
-              class="pf-v5-svg"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              viewBox="0 0 256 512"
-              width="1em"
+            <button
+              aria-disabled="false"
+              aria-label="Scroll back"
+              class="pf-v5-c-button pf-m-plain"
+              data-ouia-component-id="OUIA-Generated-Button-plain-1"
+              data-ouia-component-type="PF5/Button"
+              data-ouia-safe="true"
+              type="button"
             >
-              <path
-                d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
-              />
-            </svg>
-          </button>
+              <span
+                class="pf-v5-c-button__icon"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="pf-v5-svg"
+                  fill="currentColor"
+                  height="1em"
+                  role="img"
+                  viewBox="0 0 256 512"
+                  width="1em"
+                >
+                  <path
+                    d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
+                  />
+                </svg>
+              </span>
+            </button>
+          </div>
           <ul
             class="pf-v5-c-nav__list"
             role="list"
@@ -1064,25 +1124,37 @@ exports[`Page Check page to verify nav is created - PageNavigation syntax 1`] =
               </a>
             </li>
           </ul>
-          <button
-            aria-label="Scroll foward"
+          <div
             class="pf-v5-c-nav__scroll-button"
-            disabled=""
           >
-            <svg
-              aria-hidden="true"
-              class="pf-v5-svg"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              viewBox="0 0 256 512"
-              width="1em"
+            <button
+              aria-disabled="false"
+              aria-label="Scroll foward"
+              class="pf-v5-c-button pf-m-plain"
+              data-ouia-component-id="OUIA-Generated-Button-plain-2"
+              data-ouia-component-type="PF5/Button"
+              data-ouia-safe="true"
+              type="button"
             >
-              <path
-                d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-              />
-            </svg>
-          </button>
+              <span
+                class="pf-v5-c-button__icon"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="pf-v5-svg"
+                  fill="currentColor"
+                  height="1em"
+                  role="img"
+                  viewBox="0 0 256 512"
+                  width="1em"
+                >
+                  <path
+                    d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                  />
+                </svg>
+              </span>
+            </button>
+          </div>
         </nav>
       </div>
       <section
diff --git a/packages/react-core/src/components/Page/examples/Page.md b/packages/react-core/src/components/Page/examples/Page.md
index fea03fad8bb..b9acc0e84b5 100644
--- a/packages/react-core/src/components/Page/examples/Page.md
+++ b/packages/react-core/src/components/Page/examples/Page.md
@@ -61,16 +61,6 @@ To add horizontal navigation to the top of a `<Page>`, add the navigation inside
 
 ```
 
-### Tertiary navigation (deprecated)
-
-[Horizontal sub-navigation](/components/navigation#horizontal-subnav) is now recommended instead of tertiary-level navigation.
-
-Tertiary navigation allows you to add an additional navigation menu alongside vertical or horizontal navigation. To create tertiary navigation, use the `tertiaryNav` property. The following example passes `tertiaryNav="Navigation"` into a `<Page>` component.
-
-```ts file="./PageTertiaryNav.tsx" isDeprecated
-
-```
-
 ### Uncontrolled navigation
 
 When the `isManagedSidebar` property is true, it manages the sidebar open/close state, removing the need to pass both `isSidebarOpen` into the `<PageSidebar>` and `onSidebarToggle` into the `<PageToggleButton>`.
@@ -114,7 +104,7 @@ The following example adds a group containing `<PageNavigation>`, `<PageBreadcru
 To add additional components and information to a group, you may use the following properties:
 
 - To indicate that a breadcrumb should be in a group, use `isBreadcrumbGrouped`.
-- To indicate that tertiary navigation should be in a group, use `isTertiaryNavGrouped`.
+- To indicate that horizontal sub navigation should be in a group, use `isHorizontalSubnavGrouped`.
 - To specify additional group content, use `additionalGroupedContent`.
 
 ```ts file="./PageGroupSection.tsx"
diff --git a/packages/react-core/src/components/Page/examples/PageGroupSection.tsx b/packages/react-core/src/components/Page/examples/PageGroupSection.tsx
index 2aac5d0c8b7..f4a8bca669e 100644
--- a/packages/react-core/src/components/Page/examples/PageGroupSection.tsx
+++ b/packages/react-core/src/components/Page/examples/PageGroupSection.tsx
@@ -71,7 +71,7 @@ export const PageGroupSection: React.FunctionComponent = () => {
     <Page header={header} sidebar={sidebar}>
       <PageGroup>
         <PageNavigation>
-          <Nav aria-label="Group section navigation" variant="tertiary">
+          <Nav aria-label="Group section navigation" variant="horizontal-subnav">
             <NavList>
               <NavItem href="#" itemId={0} isActive>
                 System panel
diff --git a/packages/react-core/src/components/Page/examples/PageTertiaryNav.tsx b/packages/react-core/src/components/Page/examples/PageTertiaryNav.tsx
deleted file mode 100644
index 2795e8f9da4..00000000000
--- a/packages/react-core/src/components/Page/examples/PageTertiaryNav.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import React from 'react';
-import {
-  Page,
-  Masthead,
-  MastheadMain,
-  MastheadBrand,
-  MastheadContent,
-  PageSection,
-  Toolbar,
-  ToolbarContent,
-  ToolbarItem
-} from '@patternfly/react-core';
-
-export const PageTertiaryNav: React.FunctionComponent = () => {
-  const headerToolbar = (
-    <Toolbar id="tertiary-toolbar">
-      <ToolbarContent>
-        <ToolbarItem>header-tools</ToolbarItem>
-      </ToolbarContent>
-    </Toolbar>
-  );
-
-  const header = (
-    <Masthead display={{ default: 'stack' }} inset={{ default: 'insetXs' }}>
-      <MastheadMain>
-        <MastheadBrand href="https://patternfly.org" target="_blank">
-          Logo
-        </MastheadBrand>
-      </MastheadMain>
-      <MastheadContent>{headerToolbar}</MastheadContent>
-    </Masthead>
-  );
-
-  return (
-    <Page header={header} tertiaryNav="Navigation">
-      <PageSection>Section 1</PageSection>
-      <PageSection>Section 2</PageSection>
-      <PageSection>Section 3</PageSection>
-    </Page>
-  );
-};
diff --git a/packages/react-core/src/demos/Nav.md b/packages/react-core/src/demos/Nav.md
index be737df09b5..30c04c4e4d3 100644
--- a/packages/react-core/src/demos/Nav.md
+++ b/packages/react-core/src/demos/Nav.md
@@ -44,16 +44,6 @@ import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Co
 ```js file='./examples/Nav/NavHorizontalWithSubnav.tsx' isFullscreen
 ```
 
-### Tertiary nav (deprecated)
-
-```js file='./examples/Nav/deprecated/NavTertiary.tsx' isFullscreen
-```
-
-### Light nav (deprecated)
-
-```js file='./examples/Nav/deprecated/NavLight.tsx' isFullscreen
-```
-
 ### Manual nav
 
 ```js file='./examples/Nav/NavManual.tsx' isFullscreen
diff --git a/packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx b/packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx
index 515e4d37074..4928f42b461 100644
--- a/packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx
+++ b/packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx
@@ -527,9 +527,8 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
       skipToContent={pageSkipToContent}
       breadcrumb={dashboardBreadcrumb}
       mainContainerId={mainContainerId}
-      isTertiaryNavWidthLimited
+      isHorizontalSubnavWidthLimited
       isBreadcrumbWidthLimited
-      isTertiaryNavGrouped
       isBreadcrumbGrouped
       additionalGroupedContent={
         <PageSection>
diff --git a/packages/react-core/src/demos/examples/Nav/deprecated/NavLight.tsx b/packages/react-core/src/demos/examples/Nav/deprecated/NavLight.tsx
deleted file mode 100644
index 88ddb1e5fbd..00000000000
--- a/packages/react-core/src/demos/examples/Nav/deprecated/NavLight.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-import React from 'react';
-import {
-  Card,
-  CardBody,
-  Gallery,
-  GalleryItem,
-  Nav,
-  NavItem,
-  NavList,
-  Page,
-  PageSection,
-  PageSidebar,
-  PageSidebarBody,
-  SkipToContent,
-  TextContent,
-  Text
-} from '@patternfly/react-core';
-import { DashboardHeader } from '@patternfly/react-core/src/demos/DashboardHeader';
-
-export const NavLight: React.FunctionComponent = () => {
-  const [activeItem, setActiveItem] = React.useState<string | number>(0);
-
-  const onNavSelect = (
-    _event: React.FormEvent<HTMLInputElement>,
-    selectedItem: {
-      groupId: number | string;
-      itemId: number | string;
-      to: string;
-    }
-  ) => setActiveItem(selectedItem.itemId);
-
-  const PageNav = (
-    <Nav onSelect={onNavSelect} aria-label="Nav" theme="light">
-      <NavList>
-        {/* Preventing default click behavior on each NavItem for demo purposes only */}
-        <NavItem preventDefault itemId={0} isActive={activeItem === 0} to="#">
-          System Panel
-        </NavItem>
-        <NavItem preventDefault itemId={1} isActive={activeItem === 1} to="#">
-          Policy
-        </NavItem>
-        <NavItem preventDefault itemId={2} isActive={activeItem === 2} to="#">
-          Authentication
-        </NavItem>
-        <NavItem preventDefault itemId={3} isActive={activeItem === 3} to="#">
-          Network Services
-        </NavItem>
-        <NavItem preventDefault itemId={4} isActive={activeItem === 4} to="#">
-          Server
-        </NavItem>
-      </NavList>
-    </Nav>
-  );
-
-  const Sidebar = (
-    <PageSidebar theme="light">
-      <PageSidebarBody>{PageNav}</PageSidebarBody>
-    </PageSidebar>
-  );
-  const pageId = 'main-content-page-layout-simple-nav';
-  const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to Content</SkipToContent>;
-
-  return (
-    <React.Fragment>
-      <Page
-        header={<DashboardHeader />}
-        sidebar={Sidebar}
-        isManagedSidebar
-        skipToContent={PageSkipToContent}
-        mainContainerId={pageId}
-      >
-        <PageSection>
-          <TextContent>
-            <Text component="h1">Main title</Text>
-            <Text component="p">
-              Body text should be Overpass Regular at 16px. It should have leading of 24px because <br />
-              of its relative line height of 1.5.
-            </Text>
-          </TextContent>
-        </PageSection>
-        <PageSection>
-          <Gallery hasGutter>
-            {Array.from({ length: 10 }).map((_value, index) => (
-              <GalleryItem key={index}>
-                <Card>
-                  <CardBody>This is a card</CardBody>
-                </Card>
-              </GalleryItem>
-            ))}
-          </Gallery>
-        </PageSection>
-      </Page>
-    </React.Fragment>
-  );
-};
diff --git a/packages/react-core/src/demos/examples/Nav/deprecated/NavTertiary.tsx b/packages/react-core/src/demos/examples/Nav/deprecated/NavTertiary.tsx
deleted file mode 100644
index 3aff4cb93f8..00000000000
--- a/packages/react-core/src/demos/examples/Nav/deprecated/NavTertiary.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import React from 'react';
-import {
-  Card,
-  CardBody,
-  Gallery,
-  GalleryItem,
-  Nav,
-  NavItem,
-  NavList,
-  Page,
-  PageSection,
-  SkipToContent,
-  TextContent,
-  Text
-} from '@patternfly/react-core';
-import { DashboardBreadcrumb } from '@patternfly/react-core/src/demos/DashboardWrapper';
-import { DashboardHeader } from '@patternfly/react-core/src/demos/DashboardHeader';
-
-export const NavTertiary: React.FunctionComponent = () => {
-  const [activeItem, setActiveItem] = React.useState<string | number>(0);
-
-  const onNavSelect = (
-    _event: React.FormEvent<HTMLInputElement>,
-    selectedItem: {
-      groupId: number | string;
-      itemId: number | string;
-      to: string;
-    }
-  ) => setActiveItem(selectedItem.itemId);
-
-  const PageNav = (
-    <Nav variant="tertiary" onSelect={onNavSelect} aria-label="Nav">
-      <NavList>
-        {/* Preventing default click behavior on each NavItem for demo purposes only */}
-        <NavItem preventDefault itemId={0} isActive={activeItem === 0} to="#">
-          System Panel
-        </NavItem>
-        <NavItem preventDefault itemId={1} isActive={activeItem === 1} to="#">
-          Policy
-        </NavItem>
-        <NavItem preventDefault itemId={2} isActive={activeItem === 2} to="#">
-          Authentication
-        </NavItem>
-        <NavItem preventDefault itemId={3} isActive={activeItem === 3} to="#">
-          Network Services
-        </NavItem>
-        <NavItem preventDefault itemId={4} isActive={activeItem === 4} to="#">
-          Server
-        </NavItem>
-      </NavList>
-    </Nav>
-  );
-
-  const pageId = 'main-content-page-layout-tertiary-nav';
-  const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to content</SkipToContent>;
-
-  return (
-    <React.Fragment>
-      <Page
-        header={<DashboardHeader />}
-        breadcrumb={DashboardBreadcrumb}
-        tertiaryNav={PageNav}
-        isManagedSidebar
-        isTertiaryNavWidthLimited
-        skipToContent={PageSkipToContent}
-        mainContainerId={pageId}
-      >
-        <PageSection>
-          <TextContent>
-            <Text component="h1">Main title</Text>
-            <Text component="p">
-              Body text should be Overpass Regular at 16px. It should have leading of 24px because <br />
-              of its relative line height of 1.5.
-            </Text>
-          </TextContent>
-        </PageSection>
-        <PageSection>
-          <Gallery hasGutter>
-            {Array.from({ length: 10 }).map((_value, index) => (
-              <GalleryItem key={index}>
-                <Card>
-                  <CardBody>This is a card</CardBody>
-                </Card>
-              </GalleryItem>
-            ))}
-          </Gallery>
-        </PageSection>
-      </Page>
-    </React.Fragment>
-  );
-};
diff --git a/packages/react-docs/package.json b/packages/react-docs/package.json
index a7b2c4fba9b..193d8f513d3 100644
--- a/packages/react-docs/package.json
+++ b/packages/react-docs/package.json
@@ -23,7 +23,7 @@
     "test:a11y": "patternfly-a11y --config patternfly-a11y.config"
   },
   "dependencies": {
-    "@patternfly/patternfly": "6.0.0-alpha.49",
+    "@patternfly/patternfly": "6.0.0-alpha.51",
     "@patternfly/react-charts": "^8.0.0-alpha.6",
     "@patternfly/react-code-editor": "^6.0.0-alpha.10",
     "@patternfly/react-core": "^6.0.0-alpha.10",
diff --git a/packages/react-icons/package.json b/packages/react-icons/package.json
index e86f52d3e29..b027bc5c56e 100644
--- a/packages/react-icons/package.json
+++ b/packages/react-icons/package.json
@@ -33,7 +33,7 @@
     "@fortawesome/free-brands-svg-icons": "^5.14.0",
     "@fortawesome/free-regular-svg-icons": "^5.14.0",
     "@fortawesome/free-solid-svg-icons": "^5.14.0",
-    "@patternfly/patternfly": "6.0.0-alpha.49",
+    "@patternfly/patternfly": "6.0.0-alpha.51",
     "fs-extra": "^11.1.1",
     "glob": "^7.1.2",
     "rimraf": "^2.6.2",
diff --git a/packages/react-integration/cypress/integration/nav.spec.ts b/packages/react-integration/cypress/integration/nav.spec.ts
index 8422803ac72..0c9d327f08a 100644
--- a/packages/react-integration/cypress/integration/nav.spec.ts
+++ b/packages/react-integration/cypress/integration/nav.spec.ts
@@ -109,24 +109,6 @@ describe('Nav Test', () => {
     });
   });
 
-  it('Verify Tertiary Nav', () => {
-    cy.get('#nav-primary-tertiary .pf-v5-c-nav__link').each(
-      (tertiaryLink: JQuery<HTMLAnchorElement>, index: number) => {
-        const isCurrent = tertiaryLink.hasClass('pf-m-current');
-        expect(isCurrent).to.be.equal(index === 0);
-      }
-    );
-    cy.get('#nav-primary-tertiary #tertiary-link2').then((tertiaryLink2: JQuery<HTMLAnchorElement>) => {
-      cy.wrap(tertiaryLink2).click();
-      cy.get('#nav-primary-tertiary .pf-v5-c-nav__link').each(
-        (tertiaryNavLink: JQuery<HTMLAnchorElement>, index: number) => {
-          const isCurrent = tertiaryNavLink.hasClass('pf-m-current');
-          expect(isCurrent).to.be.equal(index === 1);
-        }
-      );
-    });
-  });
-
   it('Verify Flyout Nav', () => {
     cy.get('#3-child').should('not.exist');
     cy.get('#flyout-link3').trigger('mouseover');
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/NavDemo/NavDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/NavDemo/NavDemo.tsx
index 203ad408548..1ee315b6d41 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/NavDemo/NavDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/NavDemo/NavDemo.tsx
@@ -28,7 +28,6 @@ export class NavDemo extends Component {
     expandableActiveGroup: 'grp-1',
     expandableActiveItem: 'itm-1-1',
     horizontalActiveItem: 0,
-    tertiaryActiveItem: 0,
     expandableClickedGroup: '',
     expandableClickedItem: '',
     flyoutActiveItem: 0
@@ -300,43 +299,6 @@ export class NavDemo extends Component {
       </StackItem>
     );
   }
-  onTertiarySelect = (_event: React.FormEvent<HTMLInputElement>, result: SelectedItem) => {
-    this.setState({ tertiaryActiveItem: result.itemId });
-  };
-
-  renderTertiaryNav() {
-    const { tertiaryActiveItem } = this.state;
-
-    return (
-      <StackItem>
-        <Title headingLevel="h2" size="2xl">
-          Tertiary Nav
-        </Title>
-        <div
-          style={{
-            borderStyle: 'solid',
-            borderWidth: '0.2px',
-            borderColor: '#292e34',
-            padding: '1rem'
-          }}
-        >
-          <Nav onSelect={this.onTertiarySelect} id="nav-primary-tertiary" variant="tertiary">
-            <NavList>
-              <NavItem id="tertiary-link1" preventDefault itemId={0} isActive={tertiaryActiveItem === 0}>
-                Item 1
-              </NavItem>
-              <NavItem id="tertiary-link2" preventDefault itemId={1} isActive={tertiaryActiveItem === 1}>
-                Item 2
-              </NavItem>
-              <NavItem id="tertiary-link3" preventDefault itemId={2} isActive={tertiaryActiveItem === 2}>
-                Item 3
-              </NavItem>
-            </NavList>
-          </Nav>
-        </div>
-      </StackItem>
-    );
-  }
 
   renderFlyoutNav() {
     const { flyoutActiveItem } = this.state;
@@ -364,7 +326,7 @@ export class NavDemo extends Component {
     return (
       <StackItem>
         <Title headingLevel="h2" size="2xl">
-          Tertiary Nav
+          Flyout Nav
         </Title>
         <div
           id="flyout-nav"
@@ -404,7 +366,6 @@ export class NavDemo extends Component {
         {this.renderDefaultNav()}
         {this.renderExpandableNav()}
         {this.renderHorizontalNav()}
-        {this.renderTertiaryNav()}
         {this.renderHorizontalSubNav()}
         {this.renderFlyoutNav()}
       </Stack>
diff --git a/packages/react-styles/package.json b/packages/react-styles/package.json
index 13a52384bab..4f8a51d7b47 100644
--- a/packages/react-styles/package.json
+++ b/packages/react-styles/package.json
@@ -19,7 +19,7 @@
     "clean": "rimraf dist css"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.0.0-alpha.49",
+    "@patternfly/patternfly": "6.0.0-alpha.51",
     "camel-case": "^3.0.0",
     "css": "^2.2.3",
     "fs-extra": "^11.1.1",
diff --git a/packages/react-tokens/package.json b/packages/react-tokens/package.json
index 03ce4ddfed2..cf777f719b8 100644
--- a/packages/react-tokens/package.json
+++ b/packages/react-tokens/package.json
@@ -29,7 +29,7 @@
     "clean": "rimraf dist"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.0.0-alpha.49",
+    "@patternfly/patternfly": "6.0.0-alpha.51",
     "css": "^2.2.3",
     "fs-extra": "^11.1.1",
     "glob": "^7.1.2",
diff --git a/yarn.lock b/yarn.lock
index 6f3145ac67e..f337c0441fb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3975,10 +3975,10 @@
     puppeteer-cluster "^0.23.0"
     xmldoc "^1.1.2"
 
-"@patternfly/patternfly@6.0.0-alpha.49":
-  version "6.0.0-alpha.49"
-  resolved "https://registry.yarnpkg.com/@patternfly/patternfly/-/patternfly-6.0.0-alpha.49.tgz#99aa6fe4e6f1c14665c10d0059ef1cac1bc5d6cc"
-  integrity sha512-051Uxjk0nLWtO4Lxc45uZYWWq8WiF/7ERZ8ewxWC8sxgH9iyIE9gIG4MxbnvArXCuQHktUzpiuzh4AtiK6r6Tw==
+"@patternfly/patternfly@6.0.0-alpha.51":
+  version "6.0.0-alpha.51"
+  resolved "https://registry.yarnpkg.com/@patternfly/patternfly/-/patternfly-6.0.0-alpha.51.tgz#6e05c05133b1b08a1b85d649c592fc8b677d95d8"
+  integrity sha512-prdIaaoIkIazjbStqx0SvtrDSVElzdx/iERbo+OfZFoyd3tIuGOSFbrGIdiozF7wK5JWpCpQKkTuJXKiXcGqGw==
 
 "@pkgjs/parseargs@^0.11.0":
   version "0.11.0"