From 8dcf472ad06d6523880b1d3685d1a8d626c6abd4 Mon Sep 17 00:00:00 2001
From: Cee Chen <549407+cee-chen@users.noreply.github.com>
Date: Mon, 7 Aug 2023 07:50:36 -0700
Subject: [PATCH] [EuiCollapsibleNavBeta] Final collapsed/docked icon & popover
 behavior (#7034)

---
 .../collapsible_nav_beta.test.tsx.snap        |  14 +-
 .../collapsible_nav_beta.styles.ts            |  32 +-
 .../collapsible_nav_beta.tsx                  |  53 ++--
 .../collapsible_nav_button.test.tsx.snap      |  82 +++--
 .../collapsible_nav_button.styles.ts          |   5 +
 .../collapsible_nav_button.test.tsx           |  76 +++--
 .../collapsible_nav_button.tsx                |  27 +-
 .../collapsible_nav_accordion.test.tsx.snap   |   4 +-
 .../collapsible_nav_item.test.tsx.snap        |  23 +-
 .../collapsible_nav_link.test.tsx.snap        |   2 +-
 .../collapsed_nav_button.test.tsx.snap        |  71 +++++
 .../collapsed_nav_item.test.tsx.snap          |  51 ++++
 .../collapsed_nav_popover.test.tsx.snap       | 122 ++++++++
 .../collapsed/collapsed_nav_button.styles.ts  |  54 ++++
 .../collapsed/collapsed_nav_button.test.tsx   |  52 ++++
 .../collapsed/collapsed_nav_button.tsx        |  90 ++++++
 .../collapsed/collapsed_nav_item.stories.tsx  |  41 +++
 .../collapsed/collapsed_nav_item.test.tsx     |  42 +++
 .../collapsed/collapsed_nav_item.tsx          |  36 +++
 .../collapsed/collapsed_nav_popover.styles.ts |  70 +++++
 .../collapsed/collapsed_nav_popover.test.tsx  |  86 ++++++
 .../collapsed/collapsed_nav_popover.tsx       | 127 ++++++++
 .../collapsible_nav_item/collapsed/index.ts   |   9 +
 .../collapsible_nav_accordion.styles.ts       |   4 +-
 .../collapsible_nav_item.stories.tsx          | 286 +++++++++---------
 .../collapsible_nav_item.test.tsx             |  14 +
 .../collapsible_nav_item.tsx                  |  39 ++-
 .../collapsible_nav_link.test.tsx             |  15 +-
 .../collapsible_nav_link.tsx                  |  10 +-
 .../collapsible_nav_beta/context.ts           |  24 ++
 30 files changed, 1286 insertions(+), 275 deletions(-)
 create mode 100644 src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_button.test.tsx.snap
 create mode 100644 src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_item.test.tsx.snap
 create mode 100644 src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_popover.test.tsx.snap
 create mode 100644 src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_button.styles.ts
 create mode 100644 src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_button.test.tsx
 create mode 100644 src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_button.tsx
 create mode 100644 src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_item.stories.tsx
 create mode 100644 src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_item.test.tsx
 create mode 100644 src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_item.tsx
 create mode 100644 src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_popover.styles.ts
 create mode 100644 src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_popover.test.tsx
 create mode 100644 src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_popover.tsx
 create mode 100644 src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/index.ts
 create mode 100644 src/components/collapsible_nav_beta/context.ts

diff --git a/src/components/collapsible_nav_beta/__snapshots__/collapsible_nav_beta.test.tsx.snap b/src/components/collapsible_nav_beta/__snapshots__/collapsible_nav_beta.test.tsx.snap
index aca056d98d6..68649e2973f 100644
--- a/src/components/collapsible_nav_beta/__snapshots__/collapsible_nav_beta.test.tsx.snap
+++ b/src/components/collapsible_nav_beta/__snapshots__/collapsible_nav_beta.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`EuiCollapsibleNavBeta renders 1`] = `
         aria-expanded="true"
         aria-label="Toggle navigation closed"
         aria-pressed="true"
-        class="euiButtonIcon euiCollapsibleNavButton emotion-euiButtonIcon-s-empty-text"
+        class="euiButtonIcon euiCollapsibleNavButton emotion-euiButtonIcon-s-empty-text-euiCollapsibleNavButton"
         data-test-subj="euiCollapsibleNavButton"
         type="button"
       >
@@ -36,7 +36,7 @@ exports[`EuiCollapsibleNavBeta renders 1`] = `
     >
       <nav
         aria-label="aria-label"
-        class="euiFlyout euiCollapsibleNav euiCollapsibleNavBeta testClass1 testClass2 emotion-euiFlyout-none-noMaxWidth-push-left-left-euiCollapsibleNavBeta-left-euiTestCss"
+        class="euiFlyout euiCollapsibleNav euiCollapsibleNavBeta testClass1 testClass2 emotion-euiFlyout-none-noMaxWidth-push-left-left-euiCollapsibleNavBeta-left-isPush-euiTestCss"
         data-autofocus="true"
         data-test-subj="nav"
         id="generated-id_euiCollapsibleNav"
@@ -70,7 +70,7 @@ exports[`EuiCollapsibleNavBeta renders initialIsCollapsed 1`] = `
         aria-expanded="false"
         aria-label="Toggle navigation open"
         aria-pressed="false"
-        class="euiButtonIcon euiCollapsibleNavButton emotion-euiButtonIcon-s-empty-text"
+        class="euiButtonIcon euiCollapsibleNavButton emotion-euiButtonIcon-s-empty-text-euiCollapsibleNavButton"
         data-test-subj="euiCollapsibleNavButton"
         type="button"
       >
@@ -91,7 +91,7 @@ exports[`EuiCollapsibleNavBeta renders initialIsCollapsed 1`] = `
       data-focus-lock-disabled="disabled"
     >
       <nav
-        class="euiFlyout euiCollapsibleNav euiCollapsibleNavBeta emotion-euiFlyout-none-noMaxWidth-push-left-left-euiCollapsibleNavBeta-left"
+        class="euiFlyout euiCollapsibleNav euiCollapsibleNavBeta emotion-euiFlyout-none-noMaxWidth-push-left-left-euiCollapsibleNavBeta-left-isPush-isPushCollapsed"
         data-autofocus="true"
         data-test-subj="nav"
         id="generated-id_euiCollapsibleNav"
@@ -125,7 +125,7 @@ exports[`EuiCollapsibleNavBeta responsive behavior collapses from a push flyout
         aria-expanded="false"
         aria-label="Toggle navigation open"
         aria-pressed="false"
-        class="euiButtonIcon euiCollapsibleNavButton emotion-euiButtonIcon-s-empty-text"
+        class="euiButtonIcon euiCollapsibleNavButton emotion-euiButtonIcon-s-empty-text-euiCollapsibleNavButton"
         data-test-subj="euiCollapsibleNavButton"
         type="button"
       >
@@ -155,7 +155,7 @@ exports[`EuiCollapsibleNavBeta responsive behavior makes the overlay flyout full
         aria-expanded="true"
         aria-label="Toggle navigation closed"
         aria-pressed="true"
-        class="euiButtonIcon euiCollapsibleNavButton emotion-euiButtonIcon-s-empty-text"
+        class="euiButtonIcon euiCollapsibleNavButton emotion-euiButtonIcon-s-empty-text-euiCollapsibleNavButton"
         data-test-subj="euiCollapsibleNavButton"
         type="button"
       >
@@ -183,7 +183,7 @@ exports[`EuiCollapsibleNavBeta responsive behavior makes the overlay flyout full
     >
       <nav
         aria-describedby="generated-id"
-        class="euiFlyout euiCollapsibleNav euiCollapsibleNavBeta emotion-euiFlyout-none-noMaxWidth-overlay-left-euiCollapsibleNavBeta-left-isSmallestScreen"
+        class="euiFlyout euiCollapsibleNav euiCollapsibleNavBeta emotion-euiFlyout-none-noMaxWidth-overlay-left-euiCollapsibleNavBeta-left-isOverlayFullWidth"
         data-autofocus="true"
         id="generated-id_euiCollapsibleNav"
         role="dialog"
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_beta.styles.ts b/src/components/collapsible_nav_beta/collapsible_nav_beta.styles.ts
index 28d39cadbd7..531b03cef06 100644
--- a/src/components/collapsible_nav_beta/collapsible_nav_beta.styles.ts
+++ b/src/components/collapsible_nav_beta/collapsible_nav_beta.styles.ts
@@ -8,13 +8,26 @@
 
 import { css } from '@emotion/react';
 import { UseEuiTheme } from '../../services';
-import { logicalCSS } from '../../global_styling';
+import { logicalCSS, euiYScroll } from '../../global_styling';
+import { euiShadowFlat } from '../../themes';
 
 export const euiCollapsibleNavBetaStyles = (euiThemeContext: UseEuiTheme) => {
   const { euiTheme } = euiThemeContext;
 
   return {
     euiCollapsibleNavBeta: css`
+      /* This extra padding is needed for EuiPopovers to have enough
+         space to render with the right anchorPosition */
+      ${logicalCSS('padding-bottom', euiTheme.size.xs)}
+
+      /* Allow the nav to scroll, in case consumers don't use EuiFlyoutBody/EuiFyoutFooter */
+      ${euiYScroll(euiThemeContext)}
+
+      /* In case things get really dire responsively, ensure the footer doesn't overtake the body */
+      .euiFlyoutBody {
+        ${logicalCSS('min-height', '50%')}
+      }
+
       .euiFlyoutFooter {
         background-color: ${euiTheme.colors.emptyShade};
         ${logicalCSS('border-top', euiTheme.border.thin)}
@@ -26,7 +39,22 @@ export const euiCollapsibleNavBetaStyles = (euiThemeContext: UseEuiTheme) => {
     right: css`
       ${logicalCSS('border-left', euiTheme.border.thin)}
     `,
-    isSmallestScreen: css`
+    isPush: css`
+      ${euiShadowFlat(euiThemeContext)}
+    `,
+    isPushCollapsed: css`
+      /* Hide the scrollbar for docked mode (while still keeping the nav scrollable) 
+         Otherwise if scrollbars are visible, button icon visibility suffers */
+      &,
+      .euiFlyoutBody__overflow {
+        scrollbar-width: none; /* Firefox */
+
+        &::-webkit-scrollbar {
+          display: none; /* Chrome, Edge, & Safari */
+        }
+      }
+    `,
+    isOverlayFullWidth: css`
       /* Override EuiFlyout's max-width */
       &.euiFlyout {
         ${logicalCSS('max-width', '100% !important')}
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_beta.tsx b/src/components/collapsible_nav_beta/collapsible_nav_beta.tsx
index 1623e6c0d31..555b62a04e0 100644
--- a/src/components/collapsible_nav_beta/collapsible_nav_beta.tsx
+++ b/src/components/collapsible_nav_beta/collapsible_nav_beta.tsx
@@ -25,6 +25,7 @@ import { CommonProps } from '../common';
 import { EuiFlyout, EuiFlyoutProps } from '../flyout';
 import { euiHeaderVariables } from '../header/header.styles';
 
+import { EuiCollapsibleNavContext } from './context';
 import { EuiCollapsibleNavButton } from './collapsible_nav_button';
 import { euiCollapsibleNavBetaStyles } from './collapsible_nav_beta.styles';
 
@@ -87,16 +88,21 @@ export const EuiCollapsibleNavBeta: FunctionComponent<
   const onClose = useCallback(() => setIsCollapsed(true), []);
 
   /**
-   * Mobile behavior
+   * Responsive behavior
+   * By default on large enough screens, the nav is always a push flyout,
+   * but on smaller/mobile screens, the nav overlays the page instead
    */
-  const [isSmallScreen, setIsSmallScreen] = useState(false);
-  const [isSmallestScreen, setIsSmallestScreen] = useState(false);
+  const [isOverlay, setIsOverlay] = useState(false);
+  const [isOverlayFullWidth, setIsOverlayFullWidth] = useState(false);
 
-  // Add a window resize listener that determines breakpoint behavior
+  const flyoutType = isOverlay ? 'overlay' : 'push';
+  const isPush = !isOverlay;
+
+  // Set up a window resize listener that determines breakpoint behavior
   useEffect(() => {
     const getBreakpoints = () => {
-      setIsSmallScreen(window.innerWidth < _width * 3);
-      setIsSmallestScreen(window.innerWidth < _width * 1.5);
+      setIsOverlay(window.innerWidth < _width * 3);
+      setIsOverlayFullWidth(window.innerWidth < _width * 1.5);
     };
     getBreakpoints();
 
@@ -105,22 +111,17 @@ export const EuiCollapsibleNavBeta: FunctionComponent<
     return () => window.removeEventListener('resize', onWindowResize);
   }, [_width]);
 
-  // If the screen was previously uncollapsed and shrinks down to
-  // a smaller mobile view, default that view to a collapsed state
+  // If the nav was previously uncollapsed and shrinks down to the
+  // overlay flyout, default to its hidden/collapsed state
   useEffect(() => {
-    if (isSmallScreen) setIsCollapsed(true);
-  }, [isSmallScreen]);
-
-  // On small screens, the flyout becomes an overlay rather than a push
-  const flyoutType = isSmallScreen ? 'overlay' : 'push';
-  const isMobileCollapsed = isSmallScreen && isCollapsed;
+    if (isOverlay) setIsCollapsed(true);
+  }, [isOverlay]);
 
   const width = useMemo(() => {
-    if (isSmallestScreen) return '100%';
-    if (isSmallScreen) return _width;
-    if (isCollapsed) return headerHeight;
+    if (isOverlayFullWidth) return '100%';
+    if (isPush && isCollapsed) return headerHeight;
     return _width;
-  }, [_width, isSmallScreen, isSmallestScreen, isCollapsed, headerHeight]);
+  }, [_width, isOverlayFullWidth, isPush, isCollapsed, headerHeight]);
 
   /**
    * Header affordance
@@ -174,7 +175,9 @@ export const EuiCollapsibleNavBeta: FunctionComponent<
   const cssStyles = [
     styles.euiCollapsibleNavBeta,
     styles[side],
-    isSmallestScreen && styles.isSmallestScreen,
+    isPush && styles.isPush,
+    isPush && isCollapsed && styles.isPushCollapsed,
+    isOverlayFullWidth && styles.isOverlayFullWidth,
   ];
 
   // Wait for any fixed headers to be queried before rendering (prevents position jumping)
@@ -199,18 +202,16 @@ export const EuiCollapsibleNavBeta: FunctionComponent<
     </EuiFlyout>
   );
 
+  const hideFlyout = isOverlay && isCollapsed;
+
   return (
-    // TODO: Context for sharing state to all children
-    <>
+    <EuiCollapsibleNavContext.Provider value={{ isPush, isCollapsed, side }}>
       <EuiCollapsibleNavButton
         ref={buttonRef}
         onClick={toggleCollapsed}
-        isCollapsed={isCollapsed}
-        isSmallScreen={isSmallScreen}
-        side={side}
         aria-controls={flyoutID}
       />
-      {!isMobileCollapsed && flyout}
-    </>
+      {!hideFlyout && flyout}
+    </EuiCollapsibleNavContext.Provider>
   );
 };
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_button/__snapshots__/collapsible_nav_button.test.tsx.snap b/src/components/collapsible_nav_beta/collapsible_nav_button/__snapshots__/collapsible_nav_button.test.tsx.snap
index 8978fed5ba9..375879b3fca 100644
--- a/src/components/collapsible_nav_beta/collapsible_nav_button/__snapshots__/collapsible_nav_button.test.tsx.snap
+++ b/src/components/collapsible_nav_beta/collapsible_nav_button/__snapshots__/collapsible_nav_button.test.tsx.snap
@@ -1,6 +1,28 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`EuiCollapsibleNavButton desktop left side renders a menu left icon when expanded 1`] = `
+exports[`EuiCollapsibleNavButton overlay flyout renders a hamburger icon when collapsed 1`] = `
+<div
+  class="euiCollapsibleNavButtonWrapper emotion-euiCollapsibleNavButtonWrapper-right"
+>
+  <button
+    aria-expanded="false"
+    aria-label="Toggle navigation open"
+    aria-pressed="false"
+    class="euiButtonIcon euiCollapsibleNavButton emotion-euiButtonIcon-s-empty-text-euiCollapsibleNavButton"
+    data-test-subj="euiCollapsibleNavButton"
+    type="button"
+  >
+    <span
+      aria-hidden="true"
+      class="euiButtonIcon__icon"
+      color="inherit"
+      data-euiicon-type="menu"
+    />
+  </button>
+</div>
+`;
+
+exports[`EuiCollapsibleNavButton overlay flyout renders an X icon when expanded 1`] = `
 <div
   class="euiCollapsibleNavButtonWrapper emotion-euiCollapsibleNavButtonWrapper-left"
 >
@@ -8,7 +30,7 @@ exports[`EuiCollapsibleNavButton desktop left side renders a menu left icon when
     aria-expanded="true"
     aria-label="Toggle navigation closed"
     aria-pressed="true"
-    class="euiButtonIcon euiCollapsibleNavButton emotion-euiButtonIcon-s-empty-text"
+    class="euiButtonIcon euiCollapsibleNavButton emotion-euiButtonIcon-s-empty-text-euiCollapsibleNavButton"
     data-test-subj="euiCollapsibleNavButton"
     type="button"
   >
@@ -16,21 +38,21 @@ exports[`EuiCollapsibleNavButton desktop left side renders a menu left icon when
       aria-hidden="true"
       class="euiButtonIcon__icon"
       color="inherit"
-      data-euiicon-type="menuLeft"
+      data-euiicon-type="cross"
     />
   </button>
 </div>
 `;
 
-exports[`EuiCollapsibleNavButton desktop left side renders a menu right icon when collapsed 1`] = `
+exports[`EuiCollapsibleNavButton push flyout left side renders a menu left icon when expanded 1`] = `
 <div
   class="euiCollapsibleNavButtonWrapper emotion-euiCollapsibleNavButtonWrapper-left"
 >
   <button
-    aria-expanded="false"
-    aria-label="Toggle navigation open"
-    aria-pressed="false"
-    class="euiButtonIcon euiCollapsibleNavButton emotion-euiButtonIcon-s-empty-text"
+    aria-expanded="true"
+    aria-label="Toggle navigation closed"
+    aria-pressed="true"
+    class="euiButtonIcon euiCollapsibleNavButton emotion-euiButtonIcon-s-empty-text-euiCollapsibleNavButton"
     data-test-subj="euiCollapsibleNavButton"
     type="button"
   >
@@ -38,21 +60,21 @@ exports[`EuiCollapsibleNavButton desktop left side renders a menu right icon whe
       aria-hidden="true"
       class="euiButtonIcon__icon"
       color="inherit"
-      data-euiicon-type="menuRight"
+      data-euiicon-type="menuLeft"
     />
   </button>
 </div>
 `;
 
-exports[`EuiCollapsibleNavButton desktop right side renders a menu left icon when collapsed 1`] = `
+exports[`EuiCollapsibleNavButton push flyout left side renders a menu right icon when collapsed 1`] = `
 <div
-  class="euiCollapsibleNavButtonWrapper emotion-euiCollapsibleNavButtonWrapper-right"
+  class="euiCollapsibleNavButtonWrapper emotion-euiCollapsibleNavButtonWrapper-left"
 >
   <button
     aria-expanded="false"
     aria-label="Toggle navigation open"
     aria-pressed="false"
-    class="euiButtonIcon euiCollapsibleNavButton emotion-euiButtonIcon-s-empty-text"
+    class="euiButtonIcon euiCollapsibleNavButton emotion-euiButtonIcon-s-empty-text-euiCollapsibleNavButton"
     data-test-subj="euiCollapsibleNavButton"
     type="button"
   >
@@ -60,21 +82,21 @@ exports[`EuiCollapsibleNavButton desktop right side renders a menu left icon whe
       aria-hidden="true"
       class="euiButtonIcon__icon"
       color="inherit"
-      data-euiicon-type="menuLeft"
+      data-euiicon-type="menuRight"
     />
   </button>
 </div>
 `;
 
-exports[`EuiCollapsibleNavButton desktop right side renders a menu right icon when expanded 1`] = `
+exports[`EuiCollapsibleNavButton push flyout right side renders a menu left icon when collapsed 1`] = `
 <div
   class="euiCollapsibleNavButtonWrapper emotion-euiCollapsibleNavButtonWrapper-right"
 >
   <button
-    aria-expanded="true"
-    aria-label="Toggle navigation closed"
-    aria-pressed="true"
-    class="euiButtonIcon euiCollapsibleNavButton emotion-euiButtonIcon-s-empty-text"
+    aria-expanded="false"
+    aria-label="Toggle navigation open"
+    aria-pressed="false"
+    class="euiButtonIcon euiCollapsibleNavButton emotion-euiButtonIcon-s-empty-text-euiCollapsibleNavButton"
     data-test-subj="euiCollapsibleNavButton"
     type="button"
   >
@@ -82,21 +104,21 @@ exports[`EuiCollapsibleNavButton desktop right side renders a menu right icon wh
       aria-hidden="true"
       class="euiButtonIcon__icon"
       color="inherit"
-      data-euiicon-type="menuRight"
+      data-euiicon-type="menuLeft"
     />
   </button>
 </div>
 `;
 
-exports[`EuiCollapsibleNavButton mobile renders a hamburger icon when collapsed 1`] = `
+exports[`EuiCollapsibleNavButton push flyout right side renders a menu right icon when expanded 1`] = `
 <div
   class="euiCollapsibleNavButtonWrapper emotion-euiCollapsibleNavButtonWrapper-right"
 >
   <button
-    aria-expanded="false"
-    aria-label="Toggle navigation open"
-    aria-pressed="false"
-    class="euiButtonIcon euiCollapsibleNavButton emotion-euiButtonIcon-s-empty-text"
+    aria-expanded="true"
+    aria-label="Toggle navigation closed"
+    aria-pressed="true"
+    class="euiButtonIcon euiCollapsibleNavButton emotion-euiButtonIcon-s-empty-text-euiCollapsibleNavButton"
     data-test-subj="euiCollapsibleNavButton"
     type="button"
   >
@@ -104,29 +126,29 @@ exports[`EuiCollapsibleNavButton mobile renders a hamburger icon when collapsed
       aria-hidden="true"
       class="euiButtonIcon__icon"
       color="inherit"
-      data-euiicon-type="menu"
+      data-euiicon-type="menuRight"
     />
   </button>
 </div>
 `;
 
-exports[`EuiCollapsibleNavButton mobile renders an X icon when expanded 1`] = `
+exports[`EuiCollapsibleNavButton renders 1`] = `
 <div
   class="euiCollapsibleNavButtonWrapper emotion-euiCollapsibleNavButtonWrapper-left"
 >
   <button
     aria-expanded="true"
-    aria-label="Toggle navigation closed"
+    aria-label="aria-label"
     aria-pressed="true"
-    class="euiButtonIcon euiCollapsibleNavButton emotion-euiButtonIcon-s-empty-text"
-    data-test-subj="euiCollapsibleNavButton"
+    class="euiButtonIcon euiCollapsibleNavButton testClass1 testClass2 emotion-euiButtonIcon-s-empty-text-euiCollapsibleNavButton-euiTestCss"
+    data-test-subj="test subject string"
     type="button"
   >
     <span
       aria-hidden="true"
       class="euiButtonIcon__icon"
       color="inherit"
-      data-euiicon-type="cross"
+      data-euiicon-type="menuLeft"
     />
   </button>
 </div>
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_button/collapsible_nav_button.styles.ts b/src/components/collapsible_nav_beta/collapsible_nav_button/collapsible_nav_button.styles.ts
index 689bb038cd5..36d88118cd2 100644
--- a/src/components/collapsible_nav_beta/collapsible_nav_button/collapsible_nav_button.styles.ts
+++ b/src/components/collapsible_nav_beta/collapsible_nav_button/collapsible_nav_button.styles.ts
@@ -26,6 +26,11 @@ export const euiCollapsibleNavButtonWrapperStyles = (
       justify-content: center;
       ${logicalSizeCSS(height)}
     `,
+    euiCollapsibleNavButton: css`
+      &.euiButtonIcon:hover {
+        transform: none;
+      }
+    `,
     left: css`
       ${logicalCSS('border-right', euiTheme.border.thin)}
       ${logicalCSS('margin-left', `-${padding}`)}
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_button/collapsible_nav_button.test.tsx b/src/components/collapsible_nav_beta/collapsible_nav_button/collapsible_nav_button.test.tsx
index 9c30df2390c..b617f3b96b0 100644
--- a/src/components/collapsible_nav_beta/collapsible_nav_button/collapsible_nav_button.test.tsx
+++ b/src/components/collapsible_nav_beta/collapsible_nav_button/collapsible_nav_button.test.tsx
@@ -8,19 +8,31 @@
 
 import React from 'react';
 import { render } from '../../../test/rtl';
+import { requiredProps } from '../../../test';
+import { shouldRenderCustomStyles } from '../../../test/internal';
 
+import { EuiCollapsibleNavContext } from '../context';
 import { EuiCollapsibleNavButton } from './collapsible_nav_button';
 
 describe('EuiCollapsibleNavButton', () => {
-  describe('desktop', () => {
+  shouldRenderCustomStyles(<EuiCollapsibleNavButton {...requiredProps} />);
+
+  it('renders', () => {
+    const { container } = render(
+      <EuiCollapsibleNavButton {...requiredProps} />
+    );
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  describe('push flyout', () => {
     describe('left side', () => {
       it('renders a menu left icon when expanded', () => {
         const { container } = render(
-          <EuiCollapsibleNavButton
-            side="left"
-            isSmallScreen={false}
-            isCollapsed={false}
-          />
+          <EuiCollapsibleNavContext.Provider
+            value={{ side: 'left', isPush: true, isCollapsed: false }}
+          >
+            <EuiCollapsibleNavButton />
+          </EuiCollapsibleNavContext.Provider>
         );
 
         expect(container.firstChild).toMatchSnapshot();
@@ -31,11 +43,11 @@ describe('EuiCollapsibleNavButton', () => {
 
       it('renders a menu right icon when collapsed', () => {
         const { container } = render(
-          <EuiCollapsibleNavButton
-            side="left"
-            isSmallScreen={false}
-            isCollapsed={true}
-          />
+          <EuiCollapsibleNavContext.Provider
+            value={{ side: 'left', isPush: true, isCollapsed: true }}
+          >
+            <EuiCollapsibleNavButton />
+          </EuiCollapsibleNavContext.Provider>
         );
 
         expect(container.firstChild).toMatchSnapshot();
@@ -48,11 +60,11 @@ describe('EuiCollapsibleNavButton', () => {
     describe('right side', () => {
       it('renders a menu right icon when expanded', () => {
         const { container } = render(
-          <EuiCollapsibleNavButton
-            side="right"
-            isSmallScreen={false}
-            isCollapsed={false}
-          />
+          <EuiCollapsibleNavContext.Provider
+            value={{ side: 'right', isPush: true, isCollapsed: false }}
+          >
+            <EuiCollapsibleNavButton />
+          </EuiCollapsibleNavContext.Provider>
         );
 
         expect(container.firstChild).toMatchSnapshot();
@@ -63,11 +75,11 @@ describe('EuiCollapsibleNavButton', () => {
 
       it('renders a menu left icon when collapsed', () => {
         const { container } = render(
-          <EuiCollapsibleNavButton
-            side="right"
-            isSmallScreen={false}
-            isCollapsed={true}
-          />
+          <EuiCollapsibleNavContext.Provider
+            value={{ side: 'right', isPush: true, isCollapsed: true }}
+          >
+            <EuiCollapsibleNavButton />
+          </EuiCollapsibleNavContext.Provider>
         );
 
         expect(container.firstChild).toMatchSnapshot();
@@ -78,14 +90,14 @@ describe('EuiCollapsibleNavButton', () => {
     });
   });
 
-  describe('mobile', () => {
+  describe('overlay flyout', () => {
     it('renders an X icon when expanded', () => {
       const { container } = render(
-        <EuiCollapsibleNavButton
-          side="left"
-          isSmallScreen={true}
-          isCollapsed={false}
-        />
+        <EuiCollapsibleNavContext.Provider
+          value={{ side: 'left', isPush: false, isCollapsed: false }}
+        >
+          <EuiCollapsibleNavButton />
+        </EuiCollapsibleNavContext.Provider>
       );
 
       expect(container.firstChild).toMatchSnapshot();
@@ -96,11 +108,11 @@ describe('EuiCollapsibleNavButton', () => {
 
     it('renders a hamburger icon when collapsed', () => {
       const { container } = render(
-        <EuiCollapsibleNavButton
-          side="right"
-          isSmallScreen={true}
-          isCollapsed={true}
-        />
+        <EuiCollapsibleNavContext.Provider
+          value={{ side: 'right', isPush: false, isCollapsed: true }}
+        >
+          <EuiCollapsibleNavButton />
+        </EuiCollapsibleNavContext.Provider>
       );
 
       expect(container.firstChild).toMatchSnapshot();
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_button/collapsible_nav_button.tsx b/src/components/collapsible_nav_beta/collapsible_nav_button/collapsible_nav_button.tsx
index d135f0f5c21..f4c11df63be 100644
--- a/src/components/collapsible_nav_beta/collapsible_nav_button/collapsible_nav_button.tsx
+++ b/src/components/collapsible_nav_beta/collapsible_nav_button/collapsible_nav_button.tsx
@@ -6,40 +6,42 @@
  * Side Public License, v 1.
  */
 
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useContext } from 'react';
 
 import { useEuiTheme } from '../../../services';
 import { CommonProps } from '../../common';
 import { EuiButtonIcon, EuiButtonIconPropsForButton } from '../../button';
 import { useEuiI18n } from '../../i18n';
-import { _EuiFlyoutSide } from '../../flyout/flyout';
 
+import { EuiCollapsibleNavContext } from '../context';
 import { euiCollapsibleNavButtonWrapperStyles } from './collapsible_nav_button.styles';
+import classNames from 'classnames';
 
 export type EuiCollapsibleNavButtonProps = CommonProps &
-  Partial<EuiButtonIconPropsForButton> & {
-    isCollapsed: boolean;
-    isSmallScreen: boolean;
-    side: _EuiFlyoutSide;
-  };
+  Partial<EuiButtonIconPropsForButton>;
 
 export const EuiCollapsibleNavButton = forwardRef<
   HTMLDivElement,
   EuiCollapsibleNavButtonProps
->(({ isCollapsed, isSmallScreen, side, ...rest }, ref) => {
+>(({ className, css, ...rest }, ref) => {
+  const { side, isPush, isCollapsed } = useContext(EuiCollapsibleNavContext);
+
   const euiTheme = useEuiTheme();
   const styles = euiCollapsibleNavButtonWrapperStyles(euiTheme);
   const cssStyles = [styles.euiCollapsibleNavButtonWrapper, styles[side]];
 
+  const buttonStyles = [styles.euiCollapsibleNavButton, css];
+  const classes = classNames('euiCollapsibleNavButton', className);
+
   let iconType: string;
-  if (isSmallScreen) {
-    iconType = isCollapsed ? 'menu' : 'cross';
-  } else {
+  if (isPush) {
     if (side === 'left') {
       iconType = isCollapsed ? 'menuRight' : 'menuLeft';
     } else {
       iconType = isCollapsed ? 'menuLeft' : 'menuRight';
     }
+  } else {
+    iconType = isCollapsed ? 'menu' : 'cross';
   }
 
   const toggleOpenLabel = useEuiI18n(
@@ -56,7 +58,8 @@ export const EuiCollapsibleNavButton = forwardRef<
     <div className="euiCollapsibleNavButtonWrapper" css={cssStyles} ref={ref}>
       <EuiButtonIcon
         data-test-subj="euiCollapsibleNavButton"
-        className="euiCollapsibleNavButton"
+        className={classes}
+        css={buttonStyles}
         size="s"
         color="text"
         iconType={iconType}
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_item/__snapshots__/collapsible_nav_accordion.test.tsx.snap b/src/components/collapsible_nav_beta/collapsible_nav_item/__snapshots__/collapsible_nav_accordion.test.tsx.snap
index eab5ddcced0..7830f3fc81d 100644
--- a/src/components/collapsible_nav_beta/collapsible_nav_item/__snapshots__/collapsible_nav_accordion.test.tsx.snap
+++ b/src/components/collapsible_nav_beta/collapsible_nav_item/__snapshots__/collapsible_nav_accordion.test.tsx.snap
@@ -53,7 +53,7 @@ exports[`EuiCollapsibleNavAccordion renders as a sub item 1`] = `
           class="euiCollapsibleNavAccordion__children emotion-euiCollapsibleNavAccordion__children-isSubItem"
         >
           <span
-            class="euiCollapsibleNavLink euiCollapsibleNavItem euiCollapsibleNavSubItem emotion-euiCollapsibleNavLink-isSubItem"
+            class="euiCollapsibleNavLink euiCollapsibleNavSubItem emotion-euiCollapsibleNavLink-isSubItem"
           >
             <span
               class="euiCollapsibleNavItem__title eui-textTruncate emotion-euiCollapsibleNavItem__title"
@@ -123,7 +123,7 @@ exports[`EuiCollapsibleNavAccordion renders as a top level item 1`] = `
           class="euiCollapsibleNavAccordion__children emotion-euiCollapsibleNavAccordion__children-isTopItem"
         >
           <span
-            class="euiCollapsibleNavLink euiCollapsibleNavItem euiCollapsibleNavSubItem emotion-euiCollapsibleNavLink-isSubItem"
+            class="euiCollapsibleNavLink euiCollapsibleNavSubItem emotion-euiCollapsibleNavLink-isSubItem"
           >
             <span
               class="euiCollapsibleNavItem__title eui-textTruncate emotion-euiCollapsibleNavItem__title"
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_item/__snapshots__/collapsible_nav_item.test.tsx.snap b/src/components/collapsible_nav_beta/collapsible_nav_item/__snapshots__/collapsible_nav_item.test.tsx.snap
index ad3e2ba5f7a..6f83612fba5 100644
--- a/src/components/collapsible_nav_beta/collapsible_nav_item/__snapshots__/collapsible_nav_item.test.tsx.snap
+++ b/src/components/collapsible_nav_beta/collapsible_nav_item/__snapshots__/collapsible_nav_item.test.tsx.snap
@@ -1,5 +1,26 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`EuiCollapsibleNavItem renders a collapsed button icon when in a collapsed push flyout 1`] = `
+<span
+  aria-label="aria-label"
+  class="euiToolTipAnchor euiCollapsedNavItem euiCollapsibleNavItem testClass1 testClass2 emotion-euiToolTipAnchor-block-euiTestCss"
+  data-test-subj="test subject string"
+>
+  <button
+    class="euiButtonIcon euiCollapsedNavButton emotion-euiButtonIcon-s-empty-text-euiCollapsedNavButton"
+    data-test-subj="euiCollapsedNavButton"
+    type="button"
+  >
+    <span
+      aria-hidden="true"
+      class="euiButtonIcon__icon"
+      color="inherit"
+      data-euiicon-type="link"
+    />
+  </button>
+</span>
+`;
+
 exports[`EuiCollapsibleNavItem renders a top level accordion if items exist 1`] = `
 <div
   aria-label="aria-label"
@@ -60,7 +81,7 @@ exports[`EuiCollapsibleNavItem renders a top level accordion if items exist 1`]
         >
           <span
             aria-label="aria-label"
-            class="euiCollapsibleNavLink euiCollapsibleNavItem euiCollapsibleNavSubItem emotion-euiCollapsibleNavLink-isSubItem"
+            class="euiCollapsibleNavLink euiCollapsibleNavSubItem testClass1 testClass2 emotion-euiCollapsibleNavLink-isSubItem-euiTestCss"
             data-test-subj="test subject string"
           >
             <span
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_item/__snapshots__/collapsible_nav_link.test.tsx.snap b/src/components/collapsible_nav_beta/collapsible_nav_item/__snapshots__/collapsible_nav_link.test.tsx.snap
index fd87027b237..caea9f2b9c8 100644
--- a/src/components/collapsible_nav_beta/collapsible_nav_item/__snapshots__/collapsible_nav_link.test.tsx.snap
+++ b/src/components/collapsible_nav_beta/collapsible_nav_item/__snapshots__/collapsible_nav_link.test.tsx.snap
@@ -12,7 +12,7 @@ exports[`EuiCollapsibleNavLink renders a button if an onClick is passed but not
 exports[`EuiCollapsibleNavLink renders a link 1`] = `
 <a
   aria-label="aria-label"
-  class="euiLink euiCollapsibleNavLink testClass1 testClass2 emotion-euiLink-primary-euiCollapsibleNavLink-isTopItem-isInteractive-euiTestCss"
+  class="euiLink euiCollapsibleNavLink testClass1 testClass2 testClass1 testClass2 emotion-euiLink-primary-euiCollapsibleNavLink-isTopItem-isInteractive-euiTestCss-euiTestCss"
   data-test-subj="test subject string"
   href="#"
   rel="noopener noreferrer"
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_button.test.tsx.snap b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_button.test.tsx.snap
new file mode 100644
index 00000000000..eef1556b21c
--- /dev/null
+++ b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_button.test.tsx.snap
@@ -0,0 +1,71 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiCollapsedNavButton renders a tooltip around the icon button 1`] = `
+<body
+  class="euiBody-hasPortalContent"
+>
+  <div>
+    <span
+      aria-label="aria-label"
+      class="euiToolTipAnchor testClass1 testClass2 emotion-euiToolTipAnchor-block-euiTestCss"
+      data-test-subj="test subject string"
+    >
+      <button
+        aria-describedby="generated-id"
+        class="euiButtonIcon euiCollapsedNavButton emotion-euiButtonIcon-s-empty-text-euiCollapsedNavButton"
+        data-test-subj="euiCollapsedNavButton"
+        type="button"
+      >
+        <span
+          aria-hidden="true"
+          class="euiButtonIcon__icon"
+          color="inherit"
+          data-euiicon-type="link"
+        />
+      </button>
+    </span>
+  </div>
+  <div
+    data-euiportal="true"
+  >
+    <div
+      class="euiToolTipPopover euiToolTip emotion-euiToolTip-left-euiCollapsedNavItemTooltip-left"
+      data-position="left"
+      id="generated-id"
+      position="left"
+      role="tooltip"
+      style="top: -10px; left: -16px;"
+    >
+      <div
+        class="euiToolTip__arrow emotion-euiToolTip__arrow-left"
+        style="left: 0px; top: 4px;"
+      />
+      <div>
+        Nav item
+      </div>
+    </div>
+  </div>
+</body>
+`;
+
+exports[`EuiCollapsedNavButton renders isSelected 1`] = `
+<div>
+  <span
+    class="euiToolTipAnchor emotion-euiToolTipAnchor-block"
+  >
+    <a
+      class="euiButtonIcon euiCollapsedNavButton emotion-euiButtonIcon-s-empty-text-euiCollapsedNavButton-isSelected"
+      data-test-subj="euiCollapsedNavButton"
+      href="#"
+      rel="noreferrer"
+    >
+      <span
+        aria-hidden="true"
+        class="euiButtonIcon__icon"
+        color="inherit"
+        data-euiicon-type="link"
+      />
+    </a>
+  </span>
+</div>
+`;
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_item.test.tsx.snap b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_item.test.tsx.snap
new file mode 100644
index 00000000000..ea7c0ee4aa6
--- /dev/null
+++ b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_item.test.tsx.snap
@@ -0,0 +1,51 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiCollapsedNavItem renders a popover if items exist 1`] = `
+<div
+  class="euiPopover euiCollapsedNavItem testClass1 testClass2 emotion-euiPopover-euiTestCss"
+  data-test-subj="test subject string"
+>
+  <div
+    class="euiPopover__anchor css-zih94u-render"
+  >
+    <span
+      class="euiToolTipAnchor emotion-euiToolTipAnchor-block"
+    >
+      <button
+        class="euiButtonIcon euiCollapsedNavButton emotion-euiButtonIcon-s-empty-text-euiCollapsedNavButton"
+        data-test-subj="euiCollapsedNavButton"
+        type="button"
+      >
+        <span
+          aria-hidden="true"
+          class="euiButtonIcon__icon"
+          color="inherit"
+          data-euiicon-type="boxesHorizontal"
+        />
+      </button>
+    </span>
+  </div>
+</div>
+`;
+
+exports[`EuiCollapsedNavItem renders an icon button/link if items are missing or empty 1`] = `
+<span
+  aria-label="aria-label"
+  class="euiToolTipAnchor euiCollapsedNavItem testClass1 testClass2 emotion-euiToolTipAnchor-block-euiTestCss"
+  data-test-subj="test subject string"
+>
+  <a
+    class="euiButtonIcon euiCollapsedNavButton emotion-euiButtonIcon-s-empty-text-euiCollapsedNavButton"
+    data-test-subj="euiCollapsedNavButton"
+    href="#"
+    rel="noreferrer"
+  >
+    <span
+      aria-hidden="true"
+      class="euiButtonIcon__icon"
+      color="inherit"
+      data-euiicon-type="link"
+    />
+  </a>
+</span>
+`;
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_popover.test.tsx.snap b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_popover.test.tsx.snap
new file mode 100644
index 00000000000..9649a5dfa4a
--- /dev/null
+++ b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_popover.test.tsx.snap
@@ -0,0 +1,122 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiCollapsedNavPopover renders the title and sub-items within the popover 1`] = `
+<body>
+  <div>
+    <div
+      class="euiPopover euiPopover-isOpen testClass1 testClass2 emotion-euiPopover-euiTestCss"
+      data-test-subj="test subject string"
+    >
+      <div
+        class="euiPopover__anchor css-zih94u-render"
+      >
+        <span
+          class="euiToolTipAnchor emotion-euiToolTipAnchor-block"
+        >
+          <button
+            class="euiButtonIcon euiCollapsedNavButton emotion-euiButtonIcon-s-empty-text-euiCollapsedNavButton"
+            data-test-subj="euiCollapsedNavButton"
+            type="button"
+          >
+            <span
+              aria-hidden="true"
+              class="euiButtonIcon__icon"
+              color="inherit"
+              data-euiicon-type="boxesHorizontal"
+            />
+          </button>
+        </span>
+      </div>
+    </div>
+  </div>
+  <div
+    data-euiportal="true"
+  >
+    <div
+      data-focus-guard="true"
+      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+      tabindex="0"
+    />
+    <div
+      data-focus-lock-disabled="false"
+    >
+      <div
+        aria-describedby="generated-id"
+        aria-label="aria-label"
+        aria-live="off"
+        aria-modal="true"
+        class="euiPanel euiPanel--plain euiPopover__panel  emotion-euiPanel-grow-m-plain-euiPopover__panel-isOpen-right-euiCollapsedNavPopover__panel"
+        data-autofocus="true"
+        data-popover-open="true"
+        data-popover-panel="true"
+        role="dialog"
+        style="top: -22px; left: 16px; z-index: 2000;"
+        tabindex="0"
+      >
+        <div
+          class="euiPopover__arrow emotion-euiPopoverArrow-right"
+          data-popover-arrow="right"
+          style="left: 0px; top: 10px;"
+        />
+        <p
+          class="emotion-euiScreenReaderOnly"
+          id="generated-id"
+        >
+          You are in a dialog. Press Escape, or tap/click outside the dialog to close.
+        </p>
+        <div>
+          <div
+            class="euiPopoverTitle emotion-euiPopoverTitle-none"
+          >
+            <a
+              class="euiLink emotion-euiLink-text-euiCollapsedNavPopover__title-link"
+              data-test-subj="popoverTitle"
+              href="#"
+              rel="noreferrer"
+            >
+              <span
+                class="eui-textTruncate"
+              >
+                Item
+              </span>
+            </a>
+          </div>
+          <div
+            class="emotion-euiCollapsedNavPopover__items"
+          >
+            <a
+              class="euiLink euiCollapsibleNavLink euiCollapsibleNavSubItem emotion-euiLink-primary-euiCollapsibleNavLink-isSubItem"
+              data-test-subj="A"
+              href="#"
+              rel="noreferrer"
+            >
+              <span
+                class="euiCollapsibleNavItem__title eui-textTruncate emotion-euiCollapsibleNavItem__title"
+              >
+                Sub-item A
+              </span>
+            </a>
+            <a
+              class="euiLink euiCollapsibleNavLink euiCollapsibleNavSubItem emotion-euiLink-primary-euiCollapsibleNavLink-isSubItem"
+              data-test-subj="B"
+              href="#"
+              rel="noreferrer"
+            >
+              <span
+                class="euiCollapsibleNavItem__title eui-textTruncate emotion-euiCollapsibleNavItem__title"
+              >
+                Sub-item B
+              </span>
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      data-focus-guard="true"
+      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+      tabindex="0"
+    />
+  </div>
+</body>
+`;
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_button.styles.ts b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_button.styles.ts
new file mode 100644
index 00000000000..7a7fb81029d
--- /dev/null
+++ b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_button.styles.ts
@@ -0,0 +1,54 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+
+import { UseEuiTheme } from '../../../../services';
+import { logicalCSS } from '../../../../global_styling';
+
+import { euiCollapsibleNavItemVariables } from '../collapsible_nav_item.styles';
+
+export const euiCollapsedNavButtonStyles = (euiThemeContext: UseEuiTheme) => {
+  const sharedStyles = euiCollapsibleNavItemVariables(euiThemeContext);
+
+  return {
+    euiCollapsedNavButton: css`
+      display: flex;
+      margin: ${sharedStyles.padding};
+
+      &.euiButtonIcon:hover {
+        transform: none;
+      }
+    `,
+    isSelected: css`
+      &,
+      &:hover,
+      &:focus {
+        background-color: ${sharedStyles.backgroundSelectedColor};
+      }
+    `,
+  };
+};
+
+export const euiCollapsedNavItemTooltipStyles = ({ euiTheme }: UseEuiTheme) => {
+  return {
+    euiCollapsedNavItemTooltip: css``,
+    // Bring the tooltip closer to the nav - it's a little too far otherwise
+    left: css`
+      ${logicalCSS('margin-left', `-${euiTheme.size.m}`)}
+    `,
+    right: css`
+      ${logicalCSS('margin-right', `-${euiTheme.size.m}`)}
+    `,
+    // If the item has a popover and the popover is open, we don't want the
+    // tooltip to appear if so - the popover already renders the item title
+    hidden: css`
+      display: none;
+    `,
+  };
+};
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_button.test.tsx b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_button.test.tsx
new file mode 100644
index 00000000000..c76e149f329
--- /dev/null
+++ b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_button.test.tsx
@@ -0,0 +1,52 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import { fireEvent, waitFor } from '@testing-library/react';
+import { render, waitForEuiToolTipVisible } from '../../../../test/rtl';
+import { shouldRenderCustomStyles } from '../../../../test/internal';
+import { requiredProps } from '../../../../test';
+
+import { EuiCollapsedNavButton } from './collapsed_nav_button';
+
+describe('EuiCollapsedNavButton', () => {
+  shouldRenderCustomStyles(<EuiCollapsedNavButton title="title" />, {
+    childProps: ['linkProps'],
+  });
+
+  it('renders a tooltip around the icon button', async () => {
+    const { baseElement, getByTestSubject } = render(
+      <EuiCollapsedNavButton {...requiredProps} title="Nav item" />
+    );
+    fireEvent.mouseOver(getByTestSubject('euiCollapsedNavButton'));
+    await waitForEuiToolTipVisible();
+
+    expect(baseElement).toMatchSnapshot();
+  });
+
+  it('renders isSelected', async () => {
+    const { container } = render(
+      <EuiCollapsedNavButton title="Nav item" href="#" isSelected={true} />
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  // This is primarily used by EuiCollapsedNavPopover to hide the tooltip
+  // when the popover is open (otherwise it overlays the popover)
+  it('allows hiding the tooltip', async () => {
+    const { getByTestSubject } = render(
+      <EuiCollapsedNavButton title="Nav item" href="#" hideToolTip={true} />
+    );
+    fireEvent.mouseOver(getByTestSubject('euiCollapsedNavButton'));
+
+    await waitFor(() => {
+      const tooltip = document.querySelector('.euiToolTipPopover');
+      expect(tooltip).toHaveStyleRule('display', 'none');
+    });
+  });
+});
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_button.tsx b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_button.tsx
new file mode 100644
index 00000000000..ed5c5344b55
--- /dev/null
+++ b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_button.tsx
@@ -0,0 +1,90 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React, { FunctionComponent, useContext } from 'react';
+import classNames from 'classnames';
+
+import { useEuiTheme } from '../../../../services';
+import {
+  EuiButtonIcon,
+  EuiButtonIconPropsForAnchor,
+} from '../../../button/button_icon';
+import { EuiToolTip } from '../../../tool_tip';
+
+import { EuiCollapsibleNavContext } from '../../context';
+import { EuiCollapsibleNavItemProps } from '../collapsible_nav_item';
+
+import {
+  euiCollapsedNavButtonStyles,
+  euiCollapsedNavItemTooltipStyles,
+} from './collapsed_nav_button.styles';
+
+export const EuiCollapsedNavButton: FunctionComponent<
+  EuiCollapsibleNavItemProps & {
+    hideToolTip?: boolean;
+  }
+> = ({
+  href, // eslint-disable-line local/href-with-rel
+  title,
+  icon,
+  iconProps,
+  isSelected,
+  onClick,
+  hideToolTip,
+  linkProps,
+  // Extracted to avoid spreading to ...rest
+  accordionProps,
+  titleElement,
+  items,
+  ...rest
+}) => {
+  const euiTheme = useEuiTheme();
+  const { side } = useContext(EuiCollapsibleNavContext);
+
+  const buttonStyles = euiCollapsedNavButtonStyles(euiTheme);
+  const buttonCssStyles = [
+    buttonStyles.euiCollapsedNavButton,
+    isSelected && buttonStyles.isSelected,
+    linkProps?.css,
+  ];
+  const buttonClassName = classNames(
+    'euiCollapsedNavButton',
+    linkProps?.className
+  );
+
+  const tooltipStyles = euiCollapsedNavItemTooltipStyles(euiTheme);
+  const tooltipCssStyles = [
+    tooltipStyles.euiCollapsedNavItemTooltip,
+    tooltipStyles[side],
+    hideToolTip && tooltipStyles.hidden,
+  ];
+
+  return (
+    <EuiToolTip
+      content={title}
+      css={tooltipCssStyles}
+      position={side}
+      display="block"
+      anchorProps={rest}
+    >
+      <EuiButtonIcon
+        data-test-subj="euiCollapsedNavButton"
+        size="s"
+        color="text"
+        href={href}
+        onClick={onClick}
+        {...(linkProps as EuiButtonIconPropsForAnchor)} // Exclusive union shenanigans
+        className={buttonClassName}
+        css={buttonCssStyles}
+        iconType={icon || 'link'}
+        iconSize={iconProps?.size}
+        isSelected={isSelected}
+      />
+    </EuiToolTip>
+  );
+};
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_item.stories.tsx b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_item.stories.tsx
new file mode 100644
index 00000000000..1a1c4d991a5
--- /dev/null
+++ b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_item.stories.tsx
@@ -0,0 +1,41 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { EuiCollapsedNavItem } from './collapsed_nav_item';
+
+const meta: Meta<typeof EuiCollapsedNavItem> = {
+  title: 'EuiCollapsedNavItem',
+  component: EuiCollapsedNavItem,
+  argTypes: {
+    icon: { control: 'text' },
+  },
+};
+export default meta;
+type Story = StoryObj<typeof EuiCollapsedNavItem>;
+
+export const Playground: Story = {
+  render: ({ ...args }) => (
+    <div className="eui-displayInlineBlock">
+      <EuiCollapsedNavItem {...args} />
+    </div>
+  ),
+  args: {
+    title: 'Collapsed nav item',
+    href: '#',
+    linkProps: { target: '_blank' },
+    icon: 'home',
+    items: [
+      { title: 'Popover link A', href: '#', linkProps: { target: '_blank' } },
+      { title: 'Popover link B', href: '#' },
+      { title: 'Popover link C', href: '#' },
+    ],
+  },
+};
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_item.test.tsx b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_item.test.tsx
new file mode 100644
index 00000000000..e4dbfd3f509
--- /dev/null
+++ b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_item.test.tsx
@@ -0,0 +1,42 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import { render } from '../../../../test/rtl';
+import { requiredProps } from '../../../../test';
+
+import { EuiCollapsedNavItem } from './collapsed_nav_item';
+
+describe('EuiCollapsedNavItem', () => {
+  it('renders a popover if items exist', () => {
+    const { container } = render(
+      <EuiCollapsedNavItem
+        {...requiredProps}
+        title="Item"
+        items={[{ title: 'Sub-item' }]}
+      />
+    );
+
+    expect(container.firstChild).toHaveClass('euiPopover');
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('renders an icon button/link if items are missing or empty', () => {
+    const { container } = render(
+      <EuiCollapsedNavItem
+        {...requiredProps}
+        title="Item"
+        href="#"
+        items={[]}
+      />
+    );
+
+    expect(container.firstChild).toHaveClass('euiToolTipAnchor');
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_item.tsx b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_item.tsx
new file mode 100644
index 00000000000..8460ddfe13c
--- /dev/null
+++ b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_item.tsx
@@ -0,0 +1,36 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React, { FunctionComponent } from 'react';
+
+import { EuiCollapsibleNavItemProps } from '../collapsible_nav_item';
+
+import { EuiCollapsedNavButton } from './collapsed_nav_button';
+import { EuiCollapsedNavPopover } from './collapsed_nav_popover';
+import classNames from 'classnames';
+
+/**
+ * The collapsed nav item state only shows on larger/non-mobile screens
+ * and collapses top-level link/accordion items to only rendering icons.
+ *
+ * Accordions turn into popovers, links turn into icon buttons
+ */
+
+export const EuiCollapsedNavItem: FunctionComponent<
+  EuiCollapsibleNavItemProps
+> = ({ items, className, ...props }) => {
+  const classes = classNames('euiCollapsedNavItem', className);
+
+  const hasItems = items && items.length > 0;
+
+  return hasItems ? (
+    <EuiCollapsedNavPopover items={items} className={classes} {...props} />
+  ) : (
+    <EuiCollapsedNavButton className={classes} {...props} />
+  );
+};
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_popover.styles.ts b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_popover.styles.ts
new file mode 100644
index 00000000000..092e873cb3f
--- /dev/null
+++ b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_popover.styles.ts
@@ -0,0 +1,70 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+
+import { UseEuiTheme } from '../../../../services';
+import {
+  logicalCSS,
+  mathWithUnits,
+  euiYScrollWithShadows,
+} from '../../../../global_styling';
+
+import { euiCollapsibleNavItemVariables } from '../collapsible_nav_item.styles';
+
+export const euiCollapsedNavPopoverStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
+
+  return {
+    euiCollapsedNavPopover__panel: css`
+      ${logicalCSS(
+        'width',
+        mathWithUnits(euiTheme.size.base, (x) => x * 15)
+      )}
+    `,
+    euiCollapsedNavPopover__items: css`
+      ${euiYScrollWithShadows(euiThemeContext)}
+      padding-block: ${euiTheme.size.s};
+      padding-inline: ${euiTheme.size.xs};
+
+      ${logicalCSS('max-height', '50vh')}
+      @media (max-height: ${euiTheme.breakpoint.s}px) {
+        ${logicalCSS('max-height', '75vh')}
+      }
+    `,
+  };
+};
+
+export const euiCollapsedNavPopoverTitleStyles = (
+  euiThemeContext: UseEuiTheme
+) => {
+  const { euiTheme } = euiThemeContext;
+  const sharedStyles = euiCollapsibleNavItemVariables(euiThemeContext);
+
+  return {
+    euiCollapsedNavPopover__title: css`
+      padding: ${euiTheme.size.m};
+      font-weight: ${euiTheme.font.weight.bold};
+    `,
+    link: css`
+      /* Vertically align the external icon */
+      display: flex;
+      align-items: center;
+
+      /* Horizontally align with other external link icons */
+      [class*='euiLink__externalIcon'] {
+        ${logicalCSS('margin-left', 'auto')}
+        ${logicalCSS('margin-right', euiTheme.size.xxs)}
+        color: ${sharedStyles.rightIconColor};
+      }
+    `,
+    span: css`
+      display: block;
+    `,
+  };
+};
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_popover.test.tsx b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_popover.test.tsx
new file mode 100644
index 00000000000..70f1f1b099f
--- /dev/null
+++ b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_popover.test.tsx
@@ -0,0 +1,86 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import { fireEvent } from '@testing-library/react';
+import {
+  render,
+  waitForEuiPopoverOpen,
+  waitForEuiPopoverClose,
+} from '../../../../test/rtl';
+import { shouldRenderCustomStyles } from '../../../../test/internal';
+import { requiredProps } from '../../../../test';
+
+import { EuiCollapsedNavPopover } from './collapsed_nav_popover';
+
+describe('EuiCollapsedNavPopover', () => {
+  shouldRenderCustomStyles(
+    <EuiCollapsedNavPopover title="title" items={[{ title: 'subitem' }]} />
+  );
+  shouldRenderCustomStyles(
+    <EuiCollapsedNavPopover
+      title="title"
+      href="#"
+      items={[{ title: 'subitem' }]}
+    />,
+    {
+      childProps: ['linkProps'],
+      renderCallback: async ({ getByTestSubject }) => {
+        fireEvent.click(getByTestSubject('euiCollapsedNavButton'));
+        await waitForEuiPopoverOpen();
+      },
+    }
+  );
+
+  it('renders the title and sub-items within the popover', async () => {
+    const { baseElement, getByTestSubject } = render(
+      <EuiCollapsedNavPopover
+        {...requiredProps}
+        title="Item"
+        href="#"
+        linkProps={{ 'data-test-subj': 'popoverTitle' }}
+        items={[
+          { title: 'Sub-item A', href: '#', 'data-test-subj': 'A' },
+          { title: 'Sub-item B', href: '#', 'data-test-subj': 'B' },
+        ]}
+      />
+    );
+    fireEvent.click(getByTestSubject('euiCollapsedNavButton'));
+    await waitForEuiPopoverOpen();
+
+    expect(baseElement).toMatchSnapshot();
+    expect(getByTestSubject('popoverTitle')).toHaveTextContent('Item');
+    expect(getByTestSubject('A')).toHaveTextContent('Sub-item A');
+    expect(getByTestSubject('B')).toHaveTextContent('Sub-item B');
+
+    fireEvent.keyDown(baseElement, { key: 'Escape' });
+    await waitForEuiPopoverClose();
+  });
+
+  it('renders popver titles without links', async () => {
+    const { getByText, getByTestSubject } = render(
+      <EuiCollapsedNavPopover
+        {...requiredProps}
+        title="Popover title"
+        titleElement="h3"
+        items={[{ title: 'Subitem' }]}
+        linkProps={requiredProps} // Should not spread to non-links
+      />
+    );
+    fireEvent.click(getByTestSubject('euiCollapsedNavButton'));
+    await waitForEuiPopoverOpen();
+
+    expect(getByText('Popover title')).toMatchInlineSnapshot(`
+      <h3
+        class="eui-textTruncate emotion-euiCollapsedNavPopover__title-span"
+      >
+        Popover title
+      </h3>
+    `);
+  });
+});
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_popover.tsx b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_popover.tsx
new file mode 100644
index 00000000000..68f4aa4e053
--- /dev/null
+++ b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_popover.tsx
@@ -0,0 +1,127 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React, { FunctionComponent, useState, useCallback } from 'react';
+
+import { useEuiTheme } from '../../../../services';
+
+import { EuiLink, EuiLinkAnchorProps } from '../../../link';
+import { EuiPopover, EuiPopoverTitle } from '../../../popover';
+
+import {
+  EuiCollapsibleNavSubItem,
+  EuiCollapsibleNavItemProps,
+} from '../collapsible_nav_item';
+
+import { EuiCollapsedNavButton } from './collapsed_nav_button';
+import {
+  euiCollapsedNavPopoverStyles,
+  euiCollapsedNavPopoverTitleStyles,
+} from './collapsed_nav_popover.styles';
+
+export const EuiCollapsedNavPopover: FunctionComponent<
+  EuiCollapsibleNavItemProps & {
+    items: EuiCollapsibleNavItemProps['items'];
+  }
+> = ({
+  items,
+  href, // eslint-disable-line local/href-with-rel
+  linkProps,
+  title,
+  titleElement,
+  icon,
+  iconProps,
+  isSelected,
+  // Extracted to avoid spreading to ...rest
+  accordionProps,
+  ...rest
+}) => {
+  const euiTheme = useEuiTheme();
+  const styles = euiCollapsedNavPopoverStyles(euiTheme);
+
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+  const togglePopover = useCallback(
+    () => setIsPopoverOpen((isOpen) => !isOpen),
+    []
+  );
+  const closePopover = useCallback(() => setIsPopoverOpen(false), []);
+
+  return (
+    <EuiPopover
+      closePopover={closePopover}
+      isOpen={isPopoverOpen}
+      display="block"
+      anchorPosition="rightUp"
+      panelPaddingSize="none"
+      panelProps={{ css: styles.euiCollapsedNavPopover__panel }}
+      button={
+        <EuiCollapsedNavButton
+          title={title}
+          icon={icon || 'boxesHorizontal'}
+          iconProps={iconProps}
+          isSelected={isSelected}
+          onClick={togglePopover}
+          hideToolTip={isPopoverOpen}
+          // Note: do not pass `linkProps` to buttons that toggle popovers
+        />
+      }
+      {...rest}
+    >
+      <EuiCollapsedNavPopoverTitle
+        title={title}
+        titleElement={titleElement}
+        href={href}
+        linkProps={linkProps}
+      />
+      <div css={styles.euiCollapsedNavPopover__items}>
+        {items!.map((item, index) => (
+          <EuiCollapsibleNavSubItem key={index} {...item} />
+        ))}
+      </div>
+    </EuiPopover>
+  );
+};
+
+const EuiCollapsedNavPopoverTitle: FunctionComponent<
+  Pick<
+    EuiCollapsibleNavItemProps,
+    'title' | 'titleElement' | 'href' | 'linkProps'
+  >
+> = ({
+  title,
+  titleElement: TitleElement = 'span',
+  href, // eslint-disable-line local/href-with-rel
+  linkProps,
+}) => {
+  const euiTheme = useEuiTheme();
+  const styles = euiCollapsedNavPopoverTitleStyles(euiTheme);
+  const cssStyles = [
+    styles.euiCollapsedNavPopover__title,
+    href ? styles.link : styles.span,
+    href && linkProps?.css,
+  ];
+
+  return (
+    <EuiPopoverTitle>
+      {href ? (
+        <EuiLink
+          href={href}
+          color="text"
+          {...(linkProps as EuiLinkAnchorProps)} // ExclusiveUnion shenanigans :|
+          css={cssStyles}
+        >
+          <TitleElement className="eui-textTruncate">{title}</TitleElement>
+        </EuiLink>
+      ) : (
+        <TitleElement css={cssStyles} className="eui-textTruncate">
+          {title}
+        </TitleElement>
+      )}
+    </EuiPopoverTitle>
+  );
+};
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/index.ts b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/index.ts
new file mode 100644
index 00000000000..e937e2f5b53
--- /dev/null
+++ b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/index.ts
@@ -0,0 +1,9 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export { EuiCollapsedNavItem } from './collapsed_nav_item';
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_accordion.styles.ts b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_accordion.styles.ts
index 469cfc3fc0c..f71d7d26335 100644
--- a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_accordion.styles.ts
+++ b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_accordion.styles.ts
@@ -106,7 +106,7 @@ export const euiCollapsibleNavAccordionStyles = (
 
       & > .euiIcon {
         color: ${sharedStyles.rightIconColor};
-        transform: rotate(-90deg);
+        transform: rotate(90deg);
 
         ${euiCanAnimate} {
           transition: transform ${sharedStyles.animation},
@@ -116,7 +116,7 @@ export const euiCollapsibleNavAccordionStyles = (
 
       &.euiAccordion__iconButton-isOpen > .euiIcon {
         color: ${sharedStyles.color};
-        transform: rotate(90deg);
+        transform: rotate(-90deg);
       }
     `,
     // Children wrapper
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.stories.tsx b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.stories.tsx
index d767ff9d9ea..9735d9ed301 100644
--- a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.stories.tsx
+++ b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.stories.tsx
@@ -48,150 +48,148 @@ export const Playground: Story = {
 export const EdgeCaseTesting: Story = {
   render: ({ ...args }) => (
     <EuiCollapsibleNavBeta>
-      <div className="eui-yScroll">
-        <EuiCollapsibleNavItem {...args} href="#" title="Link with no icon" />
-        <EuiCollapsibleNavItem
-          {...args}
-          href="#"
-          title="Link with icon"
-          icon="home"
-        />
-        <EuiCollapsibleNavItem
-          {...args}
-          title="External link with icon"
-          icon="link"
-          href="#"
-          linkProps={{ target: '_blank' }}
-        />
-        <EuiCollapsibleNavItem
-          {...args}
-          onClick={() => {}}
-          title="Button with no icon"
-        />
-        <EuiCollapsibleNavItem
-          {...args}
-          linkProps={{ onClick: () => {} }}
-          title="Button with icon"
-          icon="home"
-        />
-        <EuiCollapsibleNavItem
-          {...args}
-          title="Accordion with no icon"
-          items={[
-            { ...args, title: 'Link with no icon', href: '#' },
-            { ...args, title: 'Link with icon', href: '#', icon: 'alert' },
-          ]}
-        />
-        <EuiCollapsibleNavItem
-          {...args}
-          title="Accordion with icon"
-          icon="clock"
-          items={[
-            { ...args, title: 'Link with no icon', href: '#' },
-            { ...args, title: 'Link with icon', href: '#', icon: 'alert' },
-          ]}
-        />
-        <EuiCollapsibleNavItem
-          {...args}
-          title="Accordion with nested accordions"
-          accordionProps={{ initialIsOpen: true }}
-          items={[
-            { ...args, title: 'Link', href: '#', isSelected: true },
-            { ...args, title: 'Button', onClick: () => {} },
-            { ...args, title: 'Span', href: '#' },
-            {
-              title: 'Section 2',
-              isGroupTitle: true,
-            },
-            {
-              ...args,
-              title: 'Test 2',
-              href: '#',
-              linkProps: { target: '_blank' },
-            },
-            { ...args, title: 'Not a link' },
-            {
-              ...args,
-              title: 'Nested accordion - span',
-              items: [{ title: 'grandchild' }, { title: 'grandchild 2' }],
-            },
-            {
-              ...args,
-              title: 'Nested accordion - link',
-              href: '#',
-              items: [
-                { title: 'grandchild', href: '#' },
-                { title: 'grandchild 2', href: '#' },
-              ],
-            },
-            {
-              title: 'Section 3',
-              titleElement: 'h3',
-              isGroupTitle: true,
-            },
-            {
-              ...args,
-              title: 'Nested accordion with grandchildren',
-              accordionProps: { initialIsOpen: true },
-              items: [
-                { title: 'grandchild' },
-                { title: 'grandchild 2', isSelected: true },
-                {
-                  title: 'Nested nested accordion',
-                  accordionProps: { initialIsOpen: true },
-                  items: [
-                    {
-                      title: 'greatgrandchild truncation testing',
-                      href: '#',
-                      linkProps: { target: '_blank' },
-                      isSelected: true,
-                    },
-                  ],
-                },
-              ],
-            },
-          ]}
-        />
-        <EuiCollapsibleNavItem
-          {...args}
-          title="Accordion with icon and link"
-          href="#"
-          items={[
-            { ...args, title: 'Link with no icon', href: '#' },
-            { ...args, title: 'Link with icon', href: '#', icon: 'alert' },
-          ]}
-        />
-        <EuiCollapsibleNavItem
-          {...args}
-          title="Accordion with icon and external link"
-          href="#"
-          linkProps={{ target: '_blank' }} // hmm
-          items={[
-            { ...args, title: 'Link with no icon', href: '#' },
-            { ...args, title: 'Link with icon', href: '#', icon: 'alert' },
-          ]}
-        />
-        <EuiCollapsibleNavItem
-          {...args}
-          title="Accordion with no items"
-          href="#"
-          items={[]}
-        />
-        <EuiCollapsibleNavItem
-          {...args}
-          title="Accordion with no items and no link"
-          items={[]}
-        />
-        <EuiCollapsibleNavItem
-          {...args}
-          title="No link or accordion, very very long truncated text"
-          icon="home"
-        />
-        <EuiCollapsibleNavItem
-          {...args}
-          title="No icon, very very long truncated text"
-        />
-      </div>
+      <EuiCollapsibleNavItem {...args} href="#" title="Link with no icon" />
+      <EuiCollapsibleNavItem
+        {...args}
+        href="#"
+        title="Link with icon"
+        icon="home"
+      />
+      <EuiCollapsibleNavItem
+        {...args}
+        title="External link with icon"
+        icon="link"
+        href="#"
+        linkProps={{ target: '_blank' }}
+      />
+      <EuiCollapsibleNavItem
+        {...args}
+        onClick={() => {}}
+        title="Button with no icon"
+      />
+      <EuiCollapsibleNavItem
+        {...args}
+        linkProps={{ onClick: () => {} }}
+        title="Button with icon"
+        icon="home"
+      />
+      <EuiCollapsibleNavItem
+        {...args}
+        title="Accordion with no icon"
+        items={[
+          { ...args, title: 'Link with no icon', href: '#' },
+          { ...args, title: 'Link with icon', href: '#', icon: 'alert' },
+        ]}
+      />
+      <EuiCollapsibleNavItem
+        {...args}
+        title="Accordion with icon"
+        icon="clock"
+        items={[
+          { ...args, title: 'Link with no icon', href: '#' },
+          { ...args, title: 'Link with icon', href: '#', icon: 'alert' },
+        ]}
+      />
+      <EuiCollapsibleNavItem
+        {...args}
+        title="Accordion with nested accordions"
+        accordionProps={{ initialIsOpen: true }}
+        items={[
+          { ...args, title: 'Link', href: '#', isSelected: true },
+          { ...args, title: 'Button', onClick: () => {} },
+          { ...args, title: 'Span', href: '#' },
+          {
+            title: 'Section 2',
+            isGroupTitle: true,
+          },
+          {
+            ...args,
+            title: 'Test 2',
+            href: '#',
+            linkProps: { target: '_blank' },
+          },
+          { ...args, title: 'Not a link' },
+          {
+            ...args,
+            title: 'Nested accordion - span',
+            items: [{ title: 'grandchild' }, { title: 'grandchild 2' }],
+          },
+          {
+            ...args,
+            title: 'Nested accordion - link',
+            href: '#',
+            items: [
+              { title: 'grandchild', href: '#' },
+              { title: 'grandchild 2', href: '#' },
+            ],
+          },
+          {
+            title: 'Section 3',
+            titleElement: 'h3',
+            isGroupTitle: true,
+          },
+          {
+            ...args,
+            title: 'Nested accordion with grandchildren',
+            accordionProps: { initialIsOpen: true },
+            items: [
+              { title: 'grandchild' },
+              { title: 'grandchild 2', isSelected: true },
+              {
+                title: 'Nested nested accordion',
+                accordionProps: { initialIsOpen: true },
+                items: [
+                  {
+                    title: 'greatgrandchild truncation testing',
+                    href: '#',
+                    linkProps: { target: '_blank' },
+                    isSelected: true,
+                  },
+                ],
+              },
+            ],
+          },
+        ]}
+      />
+      <EuiCollapsibleNavItem
+        {...args}
+        title="Accordion with icon and link"
+        href="#"
+        items={[
+          { ...args, title: 'Link with no icon', href: '#' },
+          { ...args, title: 'Link with icon', href: '#', icon: 'alert' },
+        ]}
+      />
+      <EuiCollapsibleNavItem
+        {...args}
+        title="Accordion with icon and external link"
+        href="#"
+        linkProps={{ target: '_blank' }} // hmm
+        items={[
+          { ...args, title: 'Link with no icon', href: '#' },
+          { ...args, title: 'Link with icon', href: '#', icon: 'alert' },
+        ]}
+      />
+      <EuiCollapsibleNavItem
+        {...args}
+        title="Accordion with no items"
+        href="#"
+        items={[]}
+      />
+      <EuiCollapsibleNavItem
+        {...args}
+        title="Accordion with no items and no link"
+        items={[]}
+      />
+      <EuiCollapsibleNavItem
+        {...args}
+        title="No link or accordion, very very long truncated text"
+        icon="home"
+      />
+      <EuiCollapsibleNavItem
+        {...args}
+        title="No icon, very very long truncated text"
+      />
     </EuiCollapsibleNavBeta>
   ),
 };
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.test.tsx b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.test.tsx
index 4690369cd7b..708f301ee5c 100644
--- a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.test.tsx
+++ b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.test.tsx
@@ -11,6 +11,7 @@ import { render } from '../../../test/rtl';
 import { shouldRenderCustomStyles } from '../../../test/internal';
 import { requiredProps } from '../../../test';
 
+import { EuiCollapsibleNavContext } from '../context';
 import { EuiCollapsibleNavItem } from './collapsible_nav_item';
 
 describe('EuiCollapsibleNavItem', () => {
@@ -50,6 +51,19 @@ describe('EuiCollapsibleNavItem', () => {
     expect(container.firstChild).toMatchSnapshot();
   });
 
+  it('renders a collapsed button icon when in a collapsed push flyout', () => {
+    const { container, getByTestSubject } = render(
+      <EuiCollapsibleNavContext.Provider
+        value={{ side: 'left', isPush: true, isCollapsed: true }}
+      >
+        <EuiCollapsibleNavItem {...requiredProps} title="Item" />
+      </EuiCollapsibleNavContext.Provider>
+    );
+
+    expect(getByTestSubject('euiCollapsedNavButton')).toBeInTheDocument();
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
   describe('link interactivity', () => {
     it('renders a static span if no href or onClick is present', () => {
       const { container } = render(<EuiCollapsibleNavItem title="Text" />);
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.tsx b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.tsx
index 1c07dfc3956..664be5f7d66 100644
--- a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.tsx
+++ b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.tsx
@@ -6,7 +6,12 @@
  * Side Public License, v 1.
  */
 
-import React, { FunctionComponent, ReactNode, HTMLAttributes } from 'react';
+import React, {
+  FunctionComponent,
+  ReactNode,
+  HTMLAttributes,
+  useContext,
+} from 'react';
 import classNames from 'classnames';
 
 import { useEuiTheme } from '../../../services';
@@ -17,6 +22,8 @@ import { EuiLinkProps } from '../../link';
 import { EuiAccordionProps } from '../../accordion';
 import { EuiTitle } from '../../title';
 
+import { EuiCollapsibleNavContext } from '../context';
+import { EuiCollapsedNavItem } from './collapsed';
 import { EuiCollapsibleNavAccordion } from './collapsible_nav_accordion';
 import { EuiCollapsibleNavLink } from './collapsible_nav_link';
 import {
@@ -114,17 +121,10 @@ const EuiCollapsibleNavItemDisplay: FunctionComponent<
   titleElement,
   icon,
   iconProps,
-  className,
   items,
   children, // Ensure children isn't spread
   ...props
 }) => {
-  const classes = classNames(
-    'euiCollapsibleNavItem',
-    { euiCollapsibleNavSubItem: isSubItem },
-    className
-  );
-
   const headerContent = (
     <EuiCollapsibleNavItemTitle
       title={title}
@@ -138,7 +138,6 @@ const EuiCollapsibleNavItemDisplay: FunctionComponent<
   if (isAccordion) {
     return (
       <EuiCollapsibleNavAccordion
-        className={classes}
         buttonContent={headerContent}
         items={items}
         {...props}
@@ -149,7 +148,6 @@ const EuiCollapsibleNavItemDisplay: FunctionComponent<
 
   return (
     <EuiCollapsibleNavLink
-      className={classes}
       {...(props as EuiLinkProps)} // EuiLink ExclusiveUnion type shenanigans
       isSubItem={isSubItem}
       isNotAccordion
@@ -197,6 +195,7 @@ export const EuiCollapsibleNavSubItem: FunctionComponent<
 > = ({ isGroupTitle, className, ...props }) => {
   const euiTheme = useEuiTheme();
   const styles = euiCollapsibleNavSubItemGroupTitleStyles(euiTheme);
+  const classes = classNames('euiCollapsibleNavSubItem', className);
 
   if (isGroupTitle) {
     const TitleElement = props.titleElement || 'div';
@@ -211,7 +210,9 @@ export const EuiCollapsibleNavSubItem: FunctionComponent<
     );
   }
 
-  return <EuiCollapsibleNavItemDisplay {...props} isSubItem />;
+  return (
+    <EuiCollapsibleNavItemDisplay className={classes} {...props} isSubItem />
+  );
 };
 
 /**
@@ -220,4 +221,18 @@ export const EuiCollapsibleNavSubItem: FunctionComponent<
 
 export const EuiCollapsibleNavItem: FunctionComponent<
   EuiCollapsibleNavItemProps
-> = (props) => <EuiCollapsibleNavItemDisplay {...props} isSubItem={false} />;
+> = ({ className, ...props }) => {
+  const classes = classNames('euiCollapsibleNavItem', className);
+
+  const { isCollapsed, isPush } = useContext(EuiCollapsibleNavContext);
+
+  return isCollapsed && isPush ? (
+    <EuiCollapsedNavItem className={classes} {...props} />
+  ) : (
+    <EuiCollapsibleNavItemDisplay
+      className={classes}
+      {...props}
+      isSubItem={false}
+    />
+  );
+};
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_link.test.tsx b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_link.test.tsx
index 60bd87ab6d4..04c615febe4 100644
--- a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_link.test.tsx
+++ b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_link.test.tsx
@@ -24,7 +24,7 @@ describe('EuiCollapsibleNavLink', () => {
       <EuiCollapsibleNavLink
         href="#"
         rel="noopener"
-        linkProps={{ target: '_blank' }}
+        linkProps={{ target: '_blank', ...requiredProps }}
         {...requiredProps}
       >
         Link
@@ -52,4 +52,17 @@ describe('EuiCollapsibleNavLink', () => {
     );
     expect(container.firstChild).toMatchSnapshot();
   });
+
+  it('does not spread `linkProps` to static spans', () => {
+    const { container } = render(
+      <EuiCollapsibleNavLink
+        isInteractive={false}
+        linkProps={{ className: 'test' }}
+      >
+        Link
+      </EuiCollapsibleNavLink>
+    );
+
+    expect(container.querySelector('.test')).not.toBeInTheDocument();
+  });
 });
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_link.tsx b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_link.tsx
index 87046081fd6..23c0a3fca52 100644
--- a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_link.tsx
+++ b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_link.tsx
@@ -51,7 +51,11 @@ export const EuiCollapsibleNavLink: FunctionComponent<
   linkProps,
   ...rest
 }) => {
-  const classes = classNames('euiCollapsibleNavLink', className);
+  const classes = classNames(
+    'euiCollapsibleNavLink',
+    className,
+    isInteractive && linkProps?.className
+  );
   const euiTheme = useEuiTheme();
   const styles = euiCollapsibleNavLinkStyles(euiTheme);
   const cssStyles = [
@@ -63,15 +67,15 @@ export const EuiCollapsibleNavLink: FunctionComponent<
       !isSelected &&
       !isSubItem &&
       styles.isTopItem.isInteractive,
-    linkProps?.css,
+    isInteractive && linkProps?.css,
   ];
 
   return isInteractive ? (
     <EuiLink
       href={href}
       rel={rel}
-      className={classes}
       {...({ ...rest, ...linkProps } as any)} // EuiLink ExclusiveUnion shenanigans
+      className={classes}
       css={cssStyles}
     >
       {children}
diff --git a/src/components/collapsible_nav_beta/context.ts b/src/components/collapsible_nav_beta/context.ts
new file mode 100644
index 00000000000..2a6190d6865
--- /dev/null
+++ b/src/components/collapsible_nav_beta/context.ts
@@ -0,0 +1,24 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { createContext } from 'react';
+
+import { _EuiFlyoutSide } from '../flyout/flyout';
+
+type _EuiCollapsibleNavContext = {
+  isCollapsed: boolean;
+  isPush: boolean;
+  side: _EuiFlyoutSide;
+};
+
+export const EuiCollapsibleNavContext =
+  createContext<_EuiCollapsibleNavContext>({
+    isCollapsed: false,
+    isPush: true,
+    side: 'left',
+  });