From c12fb27a90973f3877cfcc26f1373de976a6efcd Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Tue, 26 Sep 2023 12:50:10 -0700
Subject: [PATCH 1/7] Remove `isGroupTitle` API in favor of `renderItem`

+ provide Storybook examples of custom Kibana usage
---
 .../collapsible_nav_beta.stories.tsx          | 37 +++++++++---
 .../collapsible_nav_accordion.tsx             | 29 +++++-----
 .../collapsible_nav_item.stories.tsx          | 12 +---
 .../collapsible_nav_item.styles.ts            | 20 +------
 .../collapsible_nav_item.test.tsx             | 41 ++-----------
 .../collapsible_nav_item.tsx                  | 58 +++++++------------
 .../collapsible_nav_item/index.ts             |  1 -
 src/components/collapsible_nav_beta/index.ts  |  1 -
 8 files changed, 73 insertions(+), 126 deletions(-)

diff --git a/src/components/collapsible_nav_beta/collapsible_nav_beta.stories.tsx b/src/components/collapsible_nav_beta/collapsible_nav_beta.stories.tsx
index b7cc203b663..ad68078dad6 100644
--- a/src/components/collapsible_nav_beta/collapsible_nav_beta.stories.tsx
+++ b/src/components/collapsible_nav_beta/collapsible_nav_beta.stories.tsx
@@ -13,6 +13,7 @@ import { EuiHeader, EuiHeaderSection, EuiHeaderSectionItem } from '../header';
 import { EuiPageTemplate } from '../page_template';
 import { EuiFlyout, EuiFlyoutBody, EuiFlyoutFooter } from '../flyout';
 import { EuiButton } from '../button';
+import { EuiTitle } from '../title';
 
 import { EuiCollapsibleNavItem } from './collapsible_nav_item';
 import {
@@ -58,6 +59,22 @@ const OpenCollapsibleNav: FunctionComponent<
   );
 };
 
+const KibanaNavTitle: FunctionComponent<{
+  title: string;
+}> = ({ title }) => (
+  <EuiTitle
+    size="xxxs"
+    className="eui-textTruncate"
+    css={({ euiTheme }) => ({
+      marginTop: euiTheme.size.base,
+      paddingBlock: euiTheme.size.xs,
+      paddingInline: euiTheme.size.s,
+    })}
+  >
+    <div>{title}</div>
+  </EuiTitle>
+);
+
 export const KibanaExample: Story = {
   render: ({ ...args }) => (
     <OpenCollapsibleNav {...args}>
@@ -78,15 +95,15 @@ export const KibanaExample: Story = {
           href="#"
           items={[
             { title: 'Get started', href: '#' },
-            { title: 'Explore', isGroupTitle: true },
+            { renderItem: () => <KibanaNavTitle title="Explore" /> },
             { title: 'Discover', href: '#' },
             { title: 'Dashboards', href: '#' },
             { title: 'Visualize library', href: '#' },
-            { title: 'Content', isGroupTitle: true },
+            { renderItem: () => <KibanaNavTitle title="Content" /> },
             { title: 'Indices', href: '#' },
             { title: 'Transforms', href: '#' },
             { title: 'Indexing API', href: '#' },
-            { title: 'Security', isGroupTitle: true },
+            { renderItem: () => <KibanaNavTitle title="Security" /> },
             { title: 'API keys', href: '#' },
           ]}
         />
@@ -115,7 +132,7 @@ export const KibanaExample: Story = {
             { title: 'Alerts', href: '#' },
             { title: 'Cases', href: '#' },
             { title: 'SLOs', href: '#' },
-            { title: 'Signals', isGroupTitle: true },
+            { renderItem: () => <KibanaNavTitle title="Signals" /> },
             { title: 'Logs', href: '#' },
             {
               title: 'Tracing',
@@ -126,7 +143,7 @@ export const KibanaExample: Story = {
                 { title: 'Dependencies', href: '#' },
               ],
             },
-            { title: 'Toolbox', isGroupTitle: true },
+            { renderItem: () => <KibanaNavTitle title="Toolbox" /> },
             { title: 'Visualize library', href: '#' },
             { title: 'Dashboards', href: '#' },
             {
@@ -217,18 +234,20 @@ export const KibanaExample: Story = {
             { title: 'Overview', href: '#' },
             { title: 'Notifications', href: '#' },
             { title: 'Memory usage', href: '#' },
-            { title: 'Anomaly detection', isGroupTitle: true },
+            { renderItem: () => <KibanaNavTitle title="Anomaly detection" /> },
             { title: 'Jobs', href: '#' },
             { title: 'Anomaly explorer', href: '#' },
             { title: 'Single metric viewer', href: '#' },
             { title: 'Settings', href: '#' },
-            { title: 'Data frame analytics', isGroupTitle: true },
+            {
+              renderItem: () => <KibanaNavTitle title="Data frame analytics" />,
+            },
             { title: 'Jobs', href: '#' },
             { title: 'Results explorer', href: '#' },
             { title: 'Analytics map', href: '#' },
-            { title: 'Model management', isGroupTitle: true },
+            { renderItem: () => <KibanaNavTitle title="Model management" /> },
             { title: 'Trained models', href: '#' },
-            { title: 'Data visualizer', isGroupTitle: true },
+            { renderItem: () => <KibanaNavTitle title="Data visualizer" /> },
             { title: 'File', href: '#' },
             { title: 'Data view', href: '#' },
           ]}
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_accordion.tsx b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_accordion.tsx
index 7bc84a55bc1..dc98ffbe649 100644
--- a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_accordion.tsx
+++ b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_accordion.tsx
@@ -20,9 +20,9 @@ import { EuiAccordion } from '../../accordion';
 
 import {
   EuiCollapsibleNavSubItem,
+  EuiCollapsibleNavSubItemProps,
   _SharedEuiCollapsibleNavItemProps,
   _EuiCollapsibleNavItemDisplayProps,
-  EuiCollapsibleNavItemProps,
 } from './collapsible_nav_item';
 import { EuiCollapsibleNavLink } from './collapsible_nav_link';
 import { euiCollapsibleNavAccordionStyles } from './collapsible_nav_accordion.styles';
@@ -33,10 +33,7 @@ type EuiCollapsibleNavAccordionProps = Omit<
 > &
   _EuiCollapsibleNavItemDisplayProps & {
     buttonContent: ReactNode;
-    // On the main `EuiCollapsibleNavItem` component, this uses `EuiCollapsibleNavSubItemProps`
-    // to allow for section headings, but by the time `items` reaches this component, we
-    // know for sure it's an actual accordion item and not a section heading
-    items: EuiCollapsibleNavItemProps[];
+    items: EuiCollapsibleNavSubItemProps[];
   };
 
 /**
@@ -91,13 +88,10 @@ export const EuiCollapsibleNavAccordion: FunctionComponent<
   /**
    * Child items
    */
-  // If any of the sub items have an icon, default to an
-  // icon of `empty` so that all text lines up vertically
   const itemsHaveIcons = useMemo(
     () => items.some((item) => !!item.icon),
     [items]
   );
-  const icon = itemsHaveIcons ? 'empty' : undefined;
 
   const childrenCssStyles = [
     styles.children.euiCollapsibleNavAccordion__children,
@@ -109,12 +103,19 @@ export const EuiCollapsibleNavAccordion: FunctionComponent<
       css={childrenCssStyles}
       className="euiCollapsibleNavAccordion__children"
     >
-      {items.map((item, index) => (
-        // This is an intentional circular dependency between the accordion & parent item display.
-        // EuiSideNavItem is purposely recursive to support any amount of nested sub items,
-        // and split up into separate files/components for better dev readability
-        <EuiCollapsibleNavSubItem key={index} icon={icon} {...item} />
-      ))}
+      {items.map((item, index) => {
+        // If any of the sub items have an icon, default to an
+        // icon of `empty` so that all text lines up vertically
+        if (!item.renderItem && itemsHaveIcons && !item.icon) {
+          item.icon = 'empty';
+        }
+        return (
+          // This is an intentional circular dependency between the accordion & parent item display.
+          // EuiSideNavItem is purposely recursive to support any amount of nested sub items,
+          // and split up into separate files/components for better dev readability
+          <EuiCollapsibleNavSubItem key={index} {...item} />
+        );
+      })}
     </div>
   );
 
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 5a5de350df3..aefb238c58d 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
@@ -9,6 +9,7 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
+import { EuiSpacer } from '../../spacer';
 import { EuiCollapsibleNavBeta } from '../collapsible_nav_beta';
 
 import {
@@ -100,10 +101,7 @@ export const EdgeCaseTesting: Story = {
           { ...args, title: 'Link', href: '#', isSelected: true },
           { ...args, title: 'Button', onClick: () => {} },
           { ...args, title: 'Span', href: '#' },
-          {
-            title: 'Section 2',
-            isGroupTitle: true,
-          },
+          { renderItem: () => <EuiSpacer size="m" /> },
           {
             ...args,
             title: 'Test 2',
@@ -125,11 +123,7 @@ export const EdgeCaseTesting: Story = {
               { title: 'grandchild 2', href: '#' },
             ],
           },
-          {
-            title: 'Section 3',
-            titleElement: 'h3',
-            isGroupTitle: true,
-          },
+          { renderItem: () => <EuiSpacer size="m" /> },
           {
             ...args,
             title: 'Nested accordion with grandchildren',
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.styles.ts b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.styles.ts
index 1250997a4f4..bef726168fc 100644
--- a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.styles.ts
+++ b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.styles.ts
@@ -9,11 +9,7 @@
 import { css } from '@emotion/react';
 
 import { UseEuiTheme } from '../../../services';
-import {
-  logicalCSS,
-  logicalShorthandCSS,
-  euiFontSize,
-} from '../../../global_styling';
+import { euiFontSize } from '../../../global_styling';
 import { euiButtonColor } from '../../../themes/amsterdam/global_styling/mixins/button';
 
 /**
@@ -47,17 +43,3 @@ export const euiCollapsibleNavItemTitleStyles = {
     flex-grow: 1;
   `,
 };
-
-export const euiCollapsibleNavSubItemGroupTitleStyles = ({
-  euiTheme,
-}: UseEuiTheme) => {
-  return {
-    euiCollapsibleNavItem__groupTitle: css`
-      ${logicalCSS('margin-top', euiTheme.size.base)}
-      ${logicalShorthandCSS(
-        'padding',
-        `${euiTheme.size.xs} ${euiTheme.size.s}`
-      )}
-    `,
-  };
-};
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 708f301ee5c..5727b739f27 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
@@ -145,51 +145,18 @@ describe('EuiCollapsibleNavItem', () => {
       ).toHaveLength(5);
     });
 
-    it('renders group titles', () => {
-      const { container } = render(
-        <EuiCollapsibleNavItem
-          title="Item"
-          items={[
-            { isGroupTitle: true, title: 'Section' },
-            { title: 'Hello' },
-            { title: 'World' },
-          ]}
-        />
-      );
-
-      expect(container.querySelector('.euiCollapsibleNavItem__groupTitle'))
-        .toMatchInlineSnapshot(`
-        <div
-          class="euiTitle euiCollapsibleNavItem__groupTitle eui-textTruncate emotion-euiTitle-xxxs-euiCollapsibleNavItem__groupTitle"
-        >
-          Section
-        </div>
-      `);
-    });
-
-    it('allows customizing the group title element', () => {
-      const { container } = render(
+    it('allows rendering totally custom sub items', () => {
+      const { getByTestSubject } = render(
         <EuiCollapsibleNavItem
           title="Item"
           items={[
-            {
-              isGroupTitle: true,
-              title: 'Group title',
-              titleElement: 'h2',
-            },
+            { renderItem: () => <div data-test-subj="custom" /> },
             { title: 'Link 1', titleElement: 'h3' },
           ]}
         />
       );
 
-      expect(container.querySelector('.euiCollapsibleNavItem__groupTitle'))
-        .toMatchInlineSnapshot(`
-        <h2
-          class="euiTitle euiCollapsibleNavItem__groupTitle eui-textTruncate emotion-euiTitle-xxxs-euiCollapsibleNavItem__groupTitle"
-        >
-          Group title
-        </h2>
-      `);
+      expect(getByTestSubject('custom')).toBeInTheDocument();
     });
   });
 });
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 f3b4bd57728..709637b2d87 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,25 +6,25 @@
  * Side Public License, v 1.
  */
 
-import React, { FunctionComponent, HTMLAttributes, useContext } from 'react';
+import React, {
+  FunctionComponent,
+  HTMLAttributes,
+  ReactNode,
+  useContext,
+} from 'react';
 import classNames from 'classnames';
 
-import { useEuiTheme } from '../../../services';
 import { CommonProps, ExclusiveUnion } from '../../common';
 
 import { EuiIcon, IconType, EuiIconProps } from '../../icon';
 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 {
-  euiCollapsibleNavItemTitleStyles,
-  euiCollapsibleNavSubItemGroupTitleStyles,
-} from './collapsible_nav_item.styles';
+import { euiCollapsibleNavItemTitleStyles } from './collapsible_nav_item.styles';
 
 export type _SharedEuiCollapsibleNavItemProps = HTMLAttributes<HTMLElement> &
   CommonProps & {
@@ -37,8 +37,8 @@ export type _SharedEuiCollapsibleNavItemProps = HTMLAttributes<HTMLElement> &
     /**
      * When passed, an `EuiAccordion` with nested child item links will be rendered.
      *
-     * Accepts any #EuiCollapsibleNavItem prop, and also accepts an
-     * #EuiCollapsibleNavSubItemGroupTitle
+     * Accepts any #EuiCollapsibleNavItemProps. Or, to render completely custom
+     * subitem content, pass an object with a `renderItem` callback.
      */
     items?: EuiCollapsibleNavSubItemProps[];
     /**
@@ -79,20 +79,13 @@ export type EuiCollapsibleNavItemProps = {
   iconProps?: Partial<EuiIconProps>;
 } & _SharedEuiCollapsibleNavItemProps;
 
-export type EuiCollapsibleNavSubItemGroupTitle = Pick<
-  EuiCollapsibleNavItemProps,
-  'title' | 'titleElement'
-> & {
-  /**
-   * Pass this flag to seperate links by group title headings.
-   * Strongly consider using the `titleElement` prop for accessibility.
-   */
-  isGroupTitle?: boolean;
+export type EuiCollapsibleNavCustomSubItem = {
+  renderItem: () => ReactNode;
 };
 
 export type EuiCollapsibleNavSubItemProps = ExclusiveUnion<
   EuiCollapsibleNavItemProps,
-  EuiCollapsibleNavSubItemGroupTitle
+  EuiCollapsibleNavCustomSubItem
 >;
 
 export type _EuiCollapsibleNavItemDisplayProps = {
@@ -182,31 +175,24 @@ const EuiCollapsibleNavItemTitle: FunctionComponent<
 };
 
 /**
- * Sub-items can either be a group title, to visually separate sections
- * of nav links, or they can simply be more links or accordions
+ * Sub-items can either be a totally custom rendered item,
+ * or they can simply be more links or accordions
  */
 export const EuiCollapsibleNavSubItem: FunctionComponent<
   EuiCollapsibleNavSubItemProps
-> = ({ isGroupTitle, className, ...props }) => {
-  const euiTheme = useEuiTheme();
-  const styles = euiCollapsibleNavSubItemGroupTitleStyles(euiTheme);
+> = ({ renderItem, className, ...props }) => {
   const classes = classNames('euiCollapsibleNavSubItem', className);
 
-  if (isGroupTitle) {
-    const TitleElement = props.titleElement || 'div';
-    return (
-      <EuiTitle
-        size="xxxs"
-        css={styles.euiCollapsibleNavItem__groupTitle}
-        className="euiCollapsibleNavItem__groupTitle eui-textTruncate"
-      >
-        <TitleElement>{props.title}</TitleElement>
-      </EuiTitle>
-    );
+  if (renderItem) {
+    return <>{renderItem()}</>;
   }
 
   return (
-    <EuiCollapsibleNavItemDisplay className={classes} {...props} isSubItem />
+    <EuiCollapsibleNavItemDisplay
+      className={classes}
+      {...(props as EuiCollapsibleNavItemProps)}
+      isSubItem
+    />
   );
 };
 
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_item/index.ts b/src/components/collapsible_nav_beta/collapsible_nav_item/index.ts
index 60bb1ef33be..3cfd0ef8d2a 100644
--- a/src/components/collapsible_nav_beta/collapsible_nav_item/index.ts
+++ b/src/components/collapsible_nav_beta/collapsible_nav_item/index.ts
@@ -9,7 +9,6 @@
 export type {
   EuiCollapsibleNavItemProps,
   EuiCollapsibleNavSubItemProps,
-  EuiCollapsibleNavSubItemGroupTitle,
 } from './collapsible_nav_item';
 
 export { EuiCollapsibleNavItem } from './collapsible_nav_item';
diff --git a/src/components/collapsible_nav_beta/index.ts b/src/components/collapsible_nav_beta/index.ts
index 4e5135afa7a..c393404f2fb 100644
--- a/src/components/collapsible_nav_beta/index.ts
+++ b/src/components/collapsible_nav_beta/index.ts
@@ -17,6 +17,5 @@ export { EuiCollapsibleNavBeta } from './collapsible_nav_beta';
 export type {
   EuiCollapsibleNavItemProps,
   EuiCollapsibleNavSubItemProps,
-  EuiCollapsibleNavSubItemGroupTitle,
 } from './collapsible_nav_item';
 export { EuiCollapsibleNavItem } from './collapsible_nav_item';

From bc1e8a29e219bfd056e757b7c439712bab3e2c19 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Tue, 26 Sep 2023 16:54:44 -0700
Subject: [PATCH 2/7] [kibana] Provide example of "grouped" API sitting on top
 of flatter EUI items API

---
 .../collapsible_nav_beta.stories.tsx          | 150 ++++++++++--------
 1 file changed, 83 insertions(+), 67 deletions(-)

diff --git a/src/components/collapsible_nav_beta/collapsible_nav_beta.stories.tsx b/src/components/collapsible_nav_beta/collapsible_nav_beta.stories.tsx
index ad68078dad6..4dc29d2e083 100644
--- a/src/components/collapsible_nav_beta/collapsible_nav_beta.stories.tsx
+++ b/src/components/collapsible_nav_beta/collapsible_nav_beta.stories.tsx
@@ -15,7 +15,10 @@ import { EuiFlyout, EuiFlyoutBody, EuiFlyoutFooter } from '../flyout';
 import { EuiButton } from '../button';
 import { EuiTitle } from '../title';
 
-import { EuiCollapsibleNavItem } from './collapsible_nav_item';
+import {
+  EuiCollapsibleNavItem,
+  EuiCollapsibleNavItemProps,
+} from './collapsible_nav_item';
 import {
   EuiCollapsibleNavBeta,
   EuiCollapsibleNavBetaProps,
@@ -59,21 +62,29 @@ const OpenCollapsibleNav: FunctionComponent<
   );
 };
 
-const KibanaNavTitle: FunctionComponent<{
-  title: string;
-}> = ({ title }) => (
-  <EuiTitle
-    size="xxxs"
-    className="eui-textTruncate"
-    css={({ euiTheme }) => ({
-      marginTop: euiTheme.size.base,
-      paddingBlock: euiTheme.size.xs,
-      paddingInline: euiTheme.size.s,
-    })}
-  >
-    <div>{title}</div>
-  </EuiTitle>
-);
+const renderGroup = (
+  groupTitle: string,
+  groupItems: EuiCollapsibleNavItemProps[]
+) => {
+  return [
+    {
+      renderItem: () => (
+        <EuiTitle
+          size="xxxs"
+          className="eui-textTruncate"
+          css={({ euiTheme }) => ({
+            marginTop: euiTheme.size.base,
+            paddingBlock: euiTheme.size.xs,
+            paddingInline: euiTheme.size.s,
+          })}
+        >
+          <div>{groupTitle}</div>
+        </EuiTitle>
+      ),
+    },
+    ...groupItems,
+  ];
+};
 
 export const KibanaExample: Story = {
   render: ({ ...args }) => (
@@ -95,16 +106,17 @@ export const KibanaExample: Story = {
           href="#"
           items={[
             { title: 'Get started', href: '#' },
-            { renderItem: () => <KibanaNavTitle title="Explore" /> },
-            { title: 'Discover', href: '#' },
-            { title: 'Dashboards', href: '#' },
-            { title: 'Visualize library', href: '#' },
-            { renderItem: () => <KibanaNavTitle title="Content" /> },
-            { title: 'Indices', href: '#' },
-            { title: 'Transforms', href: '#' },
-            { title: 'Indexing API', href: '#' },
-            { renderItem: () => <KibanaNavTitle title="Security" /> },
-            { title: 'API keys', href: '#' },
+            ...renderGroup('Explore', [
+              { title: 'Discover', href: '#' },
+              { title: 'Dashboards', href: '#' },
+              { title: 'Visualize library', href: '#' },
+            ]),
+            ...renderGroup('Content', [
+              { title: 'Indices', href: '#' },
+              { title: 'Transforms', href: '#' },
+              { title: 'Indexing API', href: '#' },
+            ]),
+            ...renderGroup('Security', [{ title: 'API keys', href: '#' }]),
           ]}
         />
         <EuiCollapsibleNavItem
@@ -132,31 +144,33 @@ export const KibanaExample: Story = {
             { title: 'Alerts', href: '#' },
             { title: 'Cases', href: '#' },
             { title: 'SLOs', href: '#' },
-            { renderItem: () => <KibanaNavTitle title="Signals" /> },
-            { title: 'Logs', href: '#' },
-            {
-              title: 'Tracing',
-              href: '#',
-              items: [
-                { title: 'Services', href: '#' },
-                { title: 'Traces', href: '#' },
-                { title: 'Dependencies', href: '#' },
-              ],
-            },
-            { renderItem: () => <KibanaNavTitle title="Toolbox" /> },
-            { title: 'Visualize library', href: '#' },
-            { title: 'Dashboards', href: '#' },
-            {
-              title: 'AIOps',
-              href: '#',
-              items: [
-                { title: 'Anomaly detection', href: '#' },
-                { title: 'Spike analysis', href: '#' },
-                { title: 'Change point detection', href: '#' },
-                { title: 'Notifications', href: '#' },
-              ],
-            },
-            { title: 'Add data', href: '#' },
+            ...renderGroup('Signals', [
+              { title: 'Logs', href: '#' },
+              {
+                title: 'Tracing',
+                href: '#',
+                items: [
+                  { title: 'Services', href: '#' },
+                  { title: 'Traces', href: '#' },
+                  { title: 'Dependencies', href: '#' },
+                ],
+              },
+            ]),
+            ...renderGroup('Toolbox', [
+              { title: 'Visualize library', href: '#' },
+              { title: 'Dashboards', href: '#' },
+              {
+                title: 'AIOps',
+                href: '#',
+                items: [
+                  { title: 'Anomaly detection', href: '#' },
+                  { title: 'Spike analysis', href: '#' },
+                  { title: 'Change point detection', href: '#' },
+                  { title: 'Notifications', href: '#' },
+                ],
+              },
+              { title: 'Add data', href: '#' },
+            ]),
           ]}
         />
         <EuiCollapsibleNavItem
@@ -234,22 +248,24 @@ export const KibanaExample: Story = {
             { title: 'Overview', href: '#' },
             { title: 'Notifications', href: '#' },
             { title: 'Memory usage', href: '#' },
-            { renderItem: () => <KibanaNavTitle title="Anomaly detection" /> },
-            { title: 'Jobs', href: '#' },
-            { title: 'Anomaly explorer', href: '#' },
-            { title: 'Single metric viewer', href: '#' },
-            { title: 'Settings', href: '#' },
-            {
-              renderItem: () => <KibanaNavTitle title="Data frame analytics" />,
-            },
-            { title: 'Jobs', href: '#' },
-            { title: 'Results explorer', href: '#' },
-            { title: 'Analytics map', href: '#' },
-            { renderItem: () => <KibanaNavTitle title="Model management" /> },
-            { title: 'Trained models', href: '#' },
-            { renderItem: () => <KibanaNavTitle title="Data visualizer" /> },
-            { title: 'File', href: '#' },
-            { title: 'Data view', href: '#' },
+            ...renderGroup('Anomaly detection', [
+              { title: 'Jobs', href: '#' },
+              { title: 'Anomaly explorer', href: '#' },
+              { title: 'Single metric viewer', href: '#' },
+              { title: 'Settings', href: '#' },
+            ]),
+            ...renderGroup('Data frame analytics', [
+              { title: 'Jobs', href: '#' },
+              { title: 'Results explorer', href: '#' },
+              { title: 'Analytics map', href: '#' },
+            ]),
+            ...renderGroup('Model management', [
+              { title: 'Trained models', href: '#' },
+            ]),
+            ...renderGroup('Data visualizer', [
+              { title: 'File', href: '#' },
+              { title: 'Data view', href: '#' },
+            ]),
           ]}
         />
       </EuiFlyoutBody>

From 4a741a39c053bbec59df2b9baa7a8a8658394890 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Tue, 26 Sep 2023 13:59:46 -0700
Subject: [PATCH 3/7] [setup] Create DRY `EuiCollapsibleNavSubItems` component

- split it out from `EuiCollapsibleNavAccordion`
---
 .../collapsible_nav_accordion.test.tsx.snap   |  4 +-
 .../collapsible_nav_item.test.tsx.snap        |  2 +-
 .../collapsible_nav_accordion.styles.ts       | 25 +--------
 .../collapsible_nav_accordion.test.tsx        | 21 --------
 .../collapsible_nav_accordion.tsx             | 46 +++--------------
 .../collapsible_nav_item.styles.ts            | 35 ++++++++++++-
 .../collapsible_nav_item.test.tsx             | 24 +++++++++
 .../collapsible_nav_item.tsx                  | 51 ++++++++++++++++++-
 8 files changed, 118 insertions(+), 90 deletions(-)

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 95c4658d0e7..293ba2b0a01 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
@@ -51,7 +51,7 @@ exports[`EuiCollapsibleNavAccordion renders as a sub item 1`] = `
       class="euiAccordion__children emotion-euiAccordion__children"
     >
       <div
-        class="euiCollapsibleNavAccordion__children emotion-euiCollapsibleNavAccordion__children-isSubItem"
+        class="euiCollapsibleNavItem__items euiCollapsibleNavAccordion__children emotion-euiCollapsibleNavItem__items-isSubItem"
       >
         <span
           class="euiCollapsibleNavLink euiCollapsibleNavSubItem emotion-euiCollapsibleNavLink-isSubItem"
@@ -121,7 +121,7 @@ exports[`EuiCollapsibleNavAccordion renders as a top level item 1`] = `
       class="euiAccordion__children emotion-euiAccordion__children"
     >
       <div
-        class="euiCollapsibleNavAccordion__children emotion-euiCollapsibleNavAccordion__children-isTopItem"
+        class="euiCollapsibleNavItem__items euiCollapsibleNavAccordion__children emotion-euiCollapsibleNavItem__items-isTopItem"
       >
         <span
           class="euiCollapsibleNavLink euiCollapsibleNavSubItem emotion-euiCollapsibleNavLink-isSubItem"
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 bc66a791e5c..c176d6ddecc 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
@@ -79,7 +79,7 @@ exports[`EuiCollapsibleNavItem renders a top level accordion if items exist 1`]
       class="euiAccordion__children emotion-euiAccordion__children"
     >
       <div
-        class="euiCollapsibleNavAccordion__children emotion-euiCollapsibleNavAccordion__children-isTopItem"
+        class="euiCollapsibleNavItem__items euiCollapsibleNavAccordion__children emotion-euiCollapsibleNavItem__items-isTopItem"
       >
         <span
           aria-label="aria-label"
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 2297e78b892..8dbe7c0dfe8 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
@@ -8,11 +8,7 @@
 
 import { css } from '@emotion/react';
 
-import {
-  logicalCSS,
-  mathWithUnits,
-  euiCanAnimate,
-} from '../../../global_styling';
+import { logicalCSS, euiCanAnimate } from '../../../global_styling';
 import { UseEuiTheme } from '../../../services';
 
 import { euiCollapsibleNavItemVariables } from './collapsible_nav_item.styles';
@@ -119,24 +115,5 @@ export const euiCollapsibleNavAccordionStyles = (
         transform: rotate(-90deg);
       }
     `,
-    // Children wrapper
-    children: {
-      euiCollapsibleNavAccordion__children: css``,
-      isTopItem: css`
-        ${logicalCSS('padding-top', euiTheme.size.xs)}
-        ${logicalCSS('padding-left', euiTheme.size.xl)}
-      `,
-      isSubItem: css`
-        ${logicalCSS('border-left', euiTheme.border.thin)}
-        ${logicalCSS('margin-left', euiTheme.size.s)}
-        ${logicalCSS(
-          'padding-left',
-          mathWithUnits(
-            [euiTheme.size.s, euiTheme.border.width.thin],
-            (x, y) => x - y
-          )
-        )}
-      `,
-    },
   };
 };
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_accordion.test.tsx b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_accordion.test.tsx
index 85d8a0d7051..86418cb60bb 100644
--- a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_accordion.test.tsx
+++ b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_accordion.test.tsx
@@ -53,27 +53,6 @@ describe('EuiCollapsibleNavAccordion', () => {
     );
   });
 
-  describe('when any items have an icon', () => {
-    it('renders all items without icon with an `empty` icon', () => {
-      const { container } = render(
-        <EuiCollapsibleNavAccordion
-          {...props}
-          items={[
-            { title: '1', icon: 'home' },
-            { title: '2' },
-            { title: '3' },
-            { title: '4' },
-            { title: '5', icon: 'faceHappy' },
-          ]}
-        />
-      );
-
-      expect(
-        container.querySelectorAll('[data-euiicon-type="empty"]')
-      ).toHaveLength(3);
-    });
-  });
-
   describe('when the accordion header is a link and the link is clicked', () => {
     it('does not trigger the accordion opening', () => {
       const { getByTestSubject, container } = render(
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_accordion.tsx b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_accordion.tsx
index dc98ffbe649..5929756b615 100644
--- a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_accordion.tsx
+++ b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_accordion.tsx
@@ -11,7 +11,6 @@ import React, {
   ReactNode,
   MouseEvent,
   useCallback,
-  useMemo,
 } from 'react';
 import classNames from 'classnames';
 
@@ -19,7 +18,7 @@ import { useEuiTheme, useGeneratedHtmlId } from '../../../services';
 import { EuiAccordion } from '../../accordion';
 
 import {
-  EuiCollapsibleNavSubItem,
+  EuiCollapsibleNavSubItems,
   EuiCollapsibleNavSubItemProps,
   _SharedEuiCollapsibleNavItemProps,
   _EuiCollapsibleNavItemDisplayProps,
@@ -70,9 +69,6 @@ export const EuiCollapsibleNavAccordion: FunctionComponent<
     accordionProps?.css,
   ];
 
-  /**
-   * Title / accordion trigger
-   */
   const isTitleInteractive = !!(href || linkProps?.onClick);
 
   // Stop propagation on the title so that the accordion toggle doesn't occur on click
@@ -85,40 +81,6 @@ export const EuiCollapsibleNavAccordion: FunctionComponent<
     [linkProps?.onClick] // eslint-disable-line react-hooks/exhaustive-deps
   );
 
-  /**
-   * Child items
-   */
-  const itemsHaveIcons = useMemo(
-    () => items.some((item) => !!item.icon),
-    [items]
-  );
-
-  const childrenCssStyles = [
-    styles.children.euiCollapsibleNavAccordion__children,
-    isSubItem ? styles.children.isSubItem : styles.children.isTopItem,
-  ];
-
-  const children = (
-    <div
-      css={childrenCssStyles}
-      className="euiCollapsibleNavAccordion__children"
-    >
-      {items.map((item, index) => {
-        // If any of the sub items have an icon, default to an
-        // icon of `empty` so that all text lines up vertically
-        if (!item.renderItem && itemsHaveIcons && !item.icon) {
-          item.icon = 'empty';
-        }
-        return (
-          // This is an intentional circular dependency between the accordion & parent item display.
-          // EuiSideNavItem is purposely recursive to support any amount of nested sub items,
-          // and split up into separate files/components for better dev readability
-          <EuiCollapsibleNavSubItem key={index} {...item} />
-        );
-      })}
-    </div>
-  );
-
   return (
     <EuiAccordion
       id={groupID}
@@ -150,7 +112,11 @@ export const EuiCollapsibleNavAccordion: FunctionComponent<
         ],
       }}
     >
-      {children}
+      <EuiCollapsibleNavSubItems
+        items={items}
+        isSubItem={isSubItem}
+        className="euiCollapsibleNavAccordion__children"
+      />
     </EuiAccordion>
   );
 };
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.styles.ts b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.styles.ts
index bef726168fc..2873e006788 100644
--- a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.styles.ts
+++ b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.styles.ts
@@ -9,7 +9,11 @@
 import { css } from '@emotion/react';
 
 import { UseEuiTheme } from '../../../services';
-import { euiFontSize } from '../../../global_styling';
+import {
+  logicalCSS,
+  mathWithUnits,
+  euiFontSize,
+} from '../../../global_styling';
 import { euiButtonColor } from '../../../themes/amsterdam/global_styling/mixins/button';
 
 /**
@@ -43,3 +47,32 @@ export const euiCollapsibleNavItemTitleStyles = {
     flex-grow: 1;
   `,
 };
+
+/**
+ * Sub item groups
+ */
+
+export const euiCollapsibleNavSubItemsStyles = ({ euiTheme }: UseEuiTheme) => {
+  return {
+    euiCollapsibleNavItem__items: css``,
+    isGroup: css`
+      ${logicalCSS('padding-top', euiTheme.size.xs)}
+      ${logicalCSS('padding-left', euiTheme.size.s)}
+    `,
+    isTopItem: css`
+      ${logicalCSS('padding-top', euiTheme.size.xs)}
+      ${logicalCSS('padding-left', euiTheme.size.xl)}
+    `,
+    isSubItem: css`
+      ${logicalCSS('border-left', euiTheme.border.thin)}
+      ${logicalCSS('margin-left', euiTheme.size.s)}
+        ${logicalCSS(
+        'padding-left',
+        mathWithUnits(
+          [euiTheme.size.s, euiTheme.border.width.thin],
+          (x, y) => x - y
+        )
+      )}
+    `,
+  };
+};
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 5727b739f27..41324c9d6fc 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
@@ -140,11 +140,35 @@ describe('EuiCollapsibleNavItem', () => {
         />
       );
 
+      expect(
+        container.querySelectorAll('.euiCollapsibleNavItem__items')
+      ).toHaveLength(2);
       expect(
         container.querySelectorAll('.euiCollapsibleNavSubItem')
       ).toHaveLength(5);
     });
 
+    describe('when any items have an icon', () => {
+      it('renders all items without icon with an `empty` icon', () => {
+        const { container } = render(
+          <EuiCollapsibleNavItem
+            title="Item"
+            items={[
+              { title: '1', icon: 'home' },
+              { title: '2' },
+              { title: '3' },
+              { title: '4' },
+              { title: '5', icon: 'faceHappy' },
+            ]}
+          />
+        );
+
+        expect(
+          container.querySelectorAll('[data-euiicon-type="empty"]')
+        ).toHaveLength(3);
+      });
+    });
+
     it('allows rendering totally custom sub items', () => {
       const { getByTestSubject } = render(
         <EuiCollapsibleNavItem
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 709637b2d87..bc0e504b95f 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
@@ -11,9 +11,11 @@ import React, {
   HTMLAttributes,
   ReactNode,
   useContext,
+  useMemo,
 } from 'react';
 import classNames from 'classnames';
 
+import { useEuiTheme } from '../../../services';
 import { CommonProps, ExclusiveUnion } from '../../common';
 
 import { EuiIcon, IconType, EuiIconProps } from '../../icon';
@@ -24,7 +26,10 @@ import { EuiCollapsibleNavContext } from '../context';
 import { EuiCollapsedNavItem } from './collapsed';
 import { EuiCollapsibleNavAccordion } from './collapsible_nav_accordion';
 import { EuiCollapsibleNavLink } from './collapsible_nav_link';
-import { euiCollapsibleNavItemTitleStyles } from './collapsible_nav_item.styles';
+import {
+  euiCollapsibleNavItemTitleStyles,
+  euiCollapsibleNavSubItemsStyles,
+} from './collapsible_nav_item.styles';
 
 export type _SharedEuiCollapsibleNavItemProps = HTMLAttributes<HTMLElement> &
   CommonProps & {
@@ -196,6 +201,50 @@ export const EuiCollapsibleNavSubItem: FunctionComponent<
   );
 };
 
+/**
+ * Reuseable component for rendering a group of sub items
+ * Used by both `EuiCollapsibleNavGroup` and `EuiCollapsibleNavAccordion`
+ */
+type EuiCollapsibleNavSubItemsProps = HTMLAttributes<HTMLDivElement> &
+  _EuiCollapsibleNavItemDisplayProps & {
+    items: EuiCollapsibleNavSubItemProps[];
+  };
+export const EuiCollapsibleNavSubItems: FunctionComponent<
+  EuiCollapsibleNavSubItemsProps
+> = ({ items, isSubItem, className, ...rest }) => {
+  const classes = classNames('euiCollapsibleNavItem__items', className);
+
+  const euiTheme = useEuiTheme();
+  const styles = euiCollapsibleNavSubItemsStyles(euiTheme);
+  const cssStyles = [
+    styles.euiCollapsibleNavItem__items,
+    isSubItem ? styles.isSubItem : styles.isTopItem,
+  ];
+
+  const itemsHaveIcons = useMemo(
+    () => items.some((item) => !!item.icon),
+    [items]
+  );
+
+  return (
+    <div className={classes} css={cssStyles} {...rest}>
+      {items.map((item, index) => {
+        // If any of the sub items have an icon, default to an
+        // icon of `empty` so that all text lines up vertically
+        if (!item.renderItem && itemsHaveIcons && !item.icon) {
+          item.icon = 'empty';
+        }
+        return (
+          // This is an intentional circular dependency between the accordion & parent item display.
+          // EuiSideNavItem is purposely recursive to support any amount of nested sub items,
+          // and split up into separate files/components for better dev readability
+          <EuiCollapsibleNavSubItem key={index} {...item} />
+        );
+      })}
+    </div>
+  );
+};
+
 /**
  * The actual exported component
  */

From ee2c6e03e42805b6a4f3ec1c116ab55a15465049 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Tue, 26 Sep 2023 14:22:18 -0700
Subject: [PATCH 4/7] Create new beta EuiCollapsibleNavGroup subcomponent

- usage is still fairly beta
---
 .../collapsible_nav_group.test.tsx.snap       | 67 +++++++++++++++
 .../collapsible_nav_group.styles.ts           | 34 ++++++++
 .../collapsible_nav_group.test.tsx            | 55 ++++++++++++
 .../collapsible_nav_group.tsx                 | 83 +++++++++++++++++++
 .../collapsible_nav_group/index.ts            |  9 ++
 .../collapsible_nav_item.tsx                  |  7 +-
 6 files changed, 252 insertions(+), 3 deletions(-)
 create mode 100644 src/components/collapsible_nav_beta/collapsible_nav_group/__snapshots__/collapsible_nav_group.test.tsx.snap
 create mode 100644 src/components/collapsible_nav_beta/collapsible_nav_group/collapsible_nav_group.styles.ts
 create mode 100644 src/components/collapsible_nav_beta/collapsible_nav_group/collapsible_nav_group.test.tsx
 create mode 100644 src/components/collapsible_nav_beta/collapsible_nav_group/collapsible_nav_group.tsx
 create mode 100644 src/components/collapsible_nav_beta/collapsible_nav_group/index.ts

diff --git a/src/components/collapsible_nav_beta/collapsible_nav_group/__snapshots__/collapsible_nav_group.test.tsx.snap b/src/components/collapsible_nav_beta/collapsible_nav_group/__snapshots__/collapsible_nav_group.test.tsx.snap
new file mode 100644
index 00000000000..04a39c8552e
--- /dev/null
+++ b/src/components/collapsible_nav_beta/collapsible_nav_group/__snapshots__/collapsible_nav_group.test.tsx.snap
@@ -0,0 +1,67 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiCollapsibleNavGroup renders 1`] = `
+<div
+  class="euiCollapsibleNavGroup testClass1 testClass2 emotion-euiCollapsibleNavGroup-isWrapper-euiTestCss"
+>
+  <span
+    aria-label="aria-label"
+    class="euiCollapsibleNavLink euiCollapsibleNavItem emotion-euiCollapsibleNavLink-isTopItem-isNotAccordion-euiCollapsibleNavGroup__title"
+    data-test-subj="test subject string"
+  >
+    <span
+      data-euiicon-type="home"
+    />
+    <span
+      class="euiCollapsibleNavItem__title eui-textTruncate emotion-euiCollapsibleNavItem__title"
+    >
+      Group
+    </span>
+  </span>
+  <div
+    class="euiCollapsibleNavItem__items emotion-euiCollapsibleNavItem__items-isGroup"
+  >
+    <span
+      class="euiCollapsibleNavLink euiCollapsibleNavSubItem emotion-euiCollapsibleNavLink-isSubItem"
+    >
+      <span
+        class="euiCollapsibleNavItem__title eui-textTruncate emotion-euiCollapsibleNavItem__title"
+      >
+        Item
+      </span>
+    </span>
+  </div>
+</div>
+`;
+
+exports[`EuiCollapsibleNavGroup renders as a docked button icon 1`] = `
+<div
+  class="euiCollapsibleNavGroup emotion-euiCollapsibleNavGroup-euiCollapsibleNavGroup__title"
+>
+  <div
+    class="euiPopover euiCollapsibleNavGroup emotion-euiPopover"
+  >
+    <div
+      class="euiPopover__anchor css-zih94u-render"
+    >
+      <span
+        class="euiToolTipAnchor emotion-euiToolTipAnchor-block"
+      >
+        <button
+          aria-label="Group"
+          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="home"
+          />
+        </button>
+      </span>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_group/collapsible_nav_group.styles.ts b/src/components/collapsible_nav_beta/collapsible_nav_group/collapsible_nav_group.styles.ts
new file mode 100644
index 00000000000..82bc8d37935
--- /dev/null
+++ b/src/components/collapsible_nav_beta/collapsible_nav_group/collapsible_nav_group.styles.ts
@@ -0,0 +1,34 @@
+/*
+ * 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 { euiCollapsibleNavItemVariables } from '../collapsible_nav_item/collapsible_nav_item.styles';
+
+export const euiCollapsibleNavGroupStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
+  const sharedStyles = euiCollapsibleNavItemVariables(euiThemeContext);
+
+  return {
+    euiCollapsibleNavGroup: css``,
+    isWrapper: css`
+      margin: ${sharedStyles.padding};
+    `,
+    euiCollapsibleNavGroup__title: css`
+      margin-block: ${euiTheme.size.base};
+      margin-inline: 0;
+
+      /* Make title icons slightly larger */
+      .euiIcon {
+        transform: scale(1.25);
+      }
+    `,
+  };
+};
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_group/collapsible_nav_group.test.tsx b/src/components/collapsible_nav_beta/collapsible_nav_group/collapsible_nav_group.test.tsx
new file mode 100644
index 00000000000..7ca82ad93b7
--- /dev/null
+++ b/src/components/collapsible_nav_beta/collapsible_nav_group/collapsible_nav_group.test.tsx
@@ -0,0 +1,55 @@
+/*
+ * 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 { shouldRenderCustomStyles } from '../../../test/internal';
+import { requiredProps } from '../../../test';
+
+import { EuiCollapsibleNavContext } from '../context';
+import { EuiCollapsibleNavGroup } from './collapsible_nav_group';
+
+describe('EuiCollapsibleNavGroup', () => {
+  const sharedProps = {
+    title: 'Group',
+    items: [{ title: 'Item' }],
+    icon: 'home',
+  };
+
+  shouldRenderCustomStyles(<EuiCollapsibleNavGroup {...sharedProps} />, {
+    skip: { style: true }, // Spread to a different location than className and CSS
+  });
+  shouldRenderCustomStyles(<EuiCollapsibleNavGroup {...sharedProps} />, {
+    targetSelector: '.euiCollapsibleNavItem',
+    skip: { className: true, css: true },
+  });
+  shouldRenderCustomStyles(<EuiCollapsibleNavGroup {...sharedProps} />, {
+    childProps: ['wrapperProps'],
+    skip: { parentTest: true },
+  });
+
+  it('renders', () => {
+    const { container } = render(
+      <EuiCollapsibleNavGroup {...sharedProps} {...requiredProps} />
+    );
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('renders as a docked button icon', () => {
+    const { container } = render(
+      <EuiCollapsibleNavContext.Provider
+        value={{ side: 'left', isCollapsed: true, isPush: true }}
+      >
+        <EuiCollapsibleNavGroup {...sharedProps} />
+      </EuiCollapsibleNavContext.Provider>
+    );
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_group/collapsible_nav_group.tsx b/src/components/collapsible_nav_beta/collapsible_nav_group/collapsible_nav_group.tsx
new file mode 100644
index 00000000000..2ddb694596a
--- /dev/null
+++ b/src/components/collapsible_nav_beta/collapsible_nav_group/collapsible_nav_group.tsx
@@ -0,0 +1,83 @@
+/*
+ * 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, HTMLAttributes, useContext } from 'react';
+import classNames from 'classnames';
+
+import { useEuiTheme } from '../../../services';
+import { CommonProps } from '../../common';
+
+import { EuiCollapsibleNavContext } from '../context';
+import {
+  EuiCollapsibleNavItem,
+  EuiCollapsibleNavSubItems,
+  EuiCollapsibleNavSubItemProps,
+  EuiCollapsibleNavItemProps,
+} from '../collapsible_nav_item/collapsible_nav_item';
+import { EuiCollapsedNavPopover } from '../collapsible_nav_item/collapsed/collapsed_nav_popover';
+
+import { euiCollapsibleNavGroupStyles } from './collapsible_nav_group.styles';
+
+export type EuiCollapsibleNavGroupProps = Omit<
+  EuiCollapsibleNavItemProps,
+  'items' | 'accordionProps'
+> & {
+  /**
+   * Will render an array of `EuiCollapsibleNavItems`.
+   *
+   * Accepts any #EuiCollapsibleNavItemProps. Or, to render completely custom
+   * subitem content, pass an object with a `renderItem` callback.
+   */
+  items: EuiCollapsibleNavSubItemProps[];
+  /**
+   * Optional props to pass to the wrapping div
+   */
+  wrapperProps?: HTMLAttributes<HTMLDivElement> & CommonProps;
+};
+
+/**
+ * This component should only ever be used as a **top-level component**, and not as a sub-item.
+ * It also should **not** be used in the nav footer.
+ */
+export const EuiCollapsibleNavGroup: FunctionComponent<
+  EuiCollapsibleNavGroupProps
+> = ({ items, className, wrapperProps, ...props }) => {
+  const { isCollapsed, isPush } = useContext(EuiCollapsibleNavContext);
+
+  const classes = classNames(
+    'euiCollapsibleNavGroup',
+    className,
+    wrapperProps?.className
+  );
+
+  const euiTheme = useEuiTheme();
+  const styles = euiCollapsibleNavGroupStyles(euiTheme);
+  const cssStyles = [
+    styles.euiCollapsibleNavGroup,
+    isPush && isCollapsed
+      ? styles.euiCollapsibleNavGroup__title
+      : styles.isWrapper,
+    wrapperProps?.css,
+  ];
+
+  return (
+    <div {...wrapperProps} className={classes} css={cssStyles}>
+      {isCollapsed && isPush ? (
+        <EuiCollapsedNavPopover className={classes} items={items} {...props} />
+      ) : (
+        <>
+          <EuiCollapsibleNavItem
+            {...props}
+            css={styles.euiCollapsibleNavGroup__title}
+          />
+          <EuiCollapsibleNavSubItems items={items} isGroup />
+        </>
+      )}
+    </div>
+  );
+};
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_group/index.ts b/src/components/collapsible_nav_beta/collapsible_nav_group/index.ts
new file mode 100644
index 00000000000..7403a1cffd1
--- /dev/null
+++ b/src/components/collapsible_nav_beta/collapsible_nav_group/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 { EuiCollapsibleNavGroup } from './collapsible_nav_group';
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 bc0e504b95f..0b786eeaded 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
@@ -156,7 +156,7 @@ const EuiCollapsibleNavItemDisplay: FunctionComponent<
 /**
  * Internal subcomponent for title display
  */
-const EuiCollapsibleNavItemTitle: FunctionComponent<
+export const EuiCollapsibleNavItemTitle: FunctionComponent<
   Pick<
     EuiCollapsibleNavItemProps,
     'title' | 'titleElement' | 'icon' | 'iconProps'
@@ -208,17 +208,18 @@ export const EuiCollapsibleNavSubItem: FunctionComponent<
 type EuiCollapsibleNavSubItemsProps = HTMLAttributes<HTMLDivElement> &
   _EuiCollapsibleNavItemDisplayProps & {
     items: EuiCollapsibleNavSubItemProps[];
+    isGroup?: boolean;
   };
 export const EuiCollapsibleNavSubItems: FunctionComponent<
   EuiCollapsibleNavSubItemsProps
-> = ({ items, isSubItem, className, ...rest }) => {
+> = ({ items, isSubItem, isGroup, className, ...rest }) => {
   const classes = classNames('euiCollapsibleNavItem__items', className);
 
   const euiTheme = useEuiTheme();
   const styles = euiCollapsibleNavSubItemsStyles(euiTheme);
   const cssStyles = [
     styles.euiCollapsibleNavItem__items,
-    isSubItem ? styles.isSubItem : styles.isTopItem,
+    isGroup ? styles.isGroup : isSubItem ? styles.isSubItem : styles.isTopItem,
   ];
 
   const itemsHaveIcons = useMemo(

From 5152f08a059d48bf44925498b657b1151e38ffdd Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Tue, 26 Sep 2023 15:13:33 -0700
Subject: [PATCH 5/7] [refactor] Add new body & footer components

- instead of relying on consumers to use `EuiFlyoutBody` and `EuiFlyoutFooter` directly
---
 .../collapsible_nav_body_footer.test.tsx.snap | 26 +++++++
 .../collapsible_nav_beta.styles.ts            | 25 ++-----
 .../collapsible_nav_body_footer.styles.ts     | 44 ++++++++++++
 .../collapsible_nav_body_footer.test.tsx      | 50 ++++++++++++++
 .../collapsible_nav_body_footer.tsx           | 69 +++++++++++++++++++
 5 files changed, 193 insertions(+), 21 deletions(-)
 create mode 100644 src/components/collapsible_nav_beta/__snapshots__/collapsible_nav_body_footer.test.tsx.snap
 create mode 100644 src/components/collapsible_nav_beta/collapsible_nav_body_footer.styles.ts
 create mode 100644 src/components/collapsible_nav_beta/collapsible_nav_body_footer.test.tsx
 create mode 100644 src/components/collapsible_nav_beta/collapsible_nav_body_footer.tsx

diff --git a/src/components/collapsible_nav_beta/__snapshots__/collapsible_nav_body_footer.test.tsx.snap b/src/components/collapsible_nav_beta/__snapshots__/collapsible_nav_body_footer.test.tsx.snap
new file mode 100644
index 00000000000..4ef06f455f0
--- /dev/null
+++ b/src/components/collapsible_nav_beta/__snapshots__/collapsible_nav_body_footer.test.tsx.snap
@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiCollapsibleNavBody renders 1`] = `
+<div
+  aria-label="aria-label"
+  class="euiFlyoutBody euiCollapsibleNav__body testClass1 testClass2 emotion-euiFlyoutBody-euiCollapsibleNav__body-euiTestCss"
+  data-test-subj="test subject string"
+>
+  <div
+    class="euiFlyoutBody__overflow css-18yrfj9-noBanner"
+    tabindex="-1"
+  >
+    <div
+      class="euiFlyoutBody__overflowContent"
+    />
+  </div>
+</div>
+`;
+
+exports[`EuiCollapsibleNavFooter renders 1`] = `
+<div
+  aria-label="aria-label"
+  class="euiFlyoutFooter euiCollapsibleNav__footer testClass1 testClass2 emotion-euiFlyoutFooter-euiCollapsibleNav__footer-euiTestCss"
+  data-test-subj="test subject string"
+/>
+`;
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 5e93c634fa5..c7ed86ed0ae 100644
--- a/src/components/collapsible_nav_beta/collapsible_nav_beta.styles.ts
+++ b/src/components/collapsible_nav_beta/collapsible_nav_beta.styles.ts
@@ -12,6 +12,8 @@ import { logicalCSS, euiYScroll } from '../../global_styling';
 import { euiShadowFlat } from '../../themes';
 import { euiHeaderVariables } from '../header/header.styles';
 
+import { euiCollapsibleNavBodyStyles } from './collapsible_nav_body_footer.styles';
+
 export const euiCollapsibleNavBetaStyles = (euiThemeContext: UseEuiTheme) => {
   const { euiTheme } = euiThemeContext;
 
@@ -26,22 +28,12 @@ export const euiCollapsibleNavBetaStyles = (euiThemeContext: UseEuiTheme) => {
       /* Fixed header affordance */
       ${logicalCSS('top', fixedHeaderOffset)}
 
-      /* Allow the nav to scroll, in case consumers don't use EuiFlyoutBody/EuiFyoutFooter */
+      /* Allow the nav to scroll, in case consumers don't use the body or footer components */
       ${euiYScroll(euiThemeContext, { height: 'inherit' })}
 
       /* This extra padding is needed for EuiPopovers to have enough
          space to render with the right anchorPosition */
       ${logicalCSS('padding-bottom', euiTheme.size.xs)}
-
-      /* 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)}
-      }
     `,
     left: css`
       ${logicalCSS('border-right', euiTheme.border.thin)}
@@ -53,16 +45,7 @@ export const euiCollapsibleNavBetaStyles = (euiThemeContext: UseEuiTheme) => {
       ${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 */
-        }
-      }
+      ${euiCollapsibleNavBodyStyles._isPushCollapsed}
     `,
     isOverlayFullWidth: css`
       /* Override EuiFlyout's max-width */
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_body_footer.styles.ts b/src/components/collapsible_nav_beta/collapsible_nav_body_footer.styles.ts
new file mode 100644
index 00000000000..260697f2992
--- /dev/null
+++ b/src/components/collapsible_nav_beta/collapsible_nav_body_footer.styles.ts
@@ -0,0 +1,44 @@
+/*
+ * 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';
+
+export const euiCollapsibleNavBodyStyles = {
+  // In case things get really dire responsively, ensure the footer doesn't overtake the body
+  euiCollapsibleNav__body: css`
+    ${logicalCSS('min-height', '50%')}
+  `,
+  get isPushCollapsed() {
+    return css`
+      .euiFlyoutBody__overflow {
+        ${this._isPushCollapsed}
+      }
+    `;
+  },
+  // CSS is reused by main euiCollapsibleNav styles in case the body component isn't used
+  _isPushCollapsed: `
+    /* Hide the scrollbar for docked mode (while still keeping the nav scrollable)
+       Otherwise if scrollbars are visible, button icon visibility suffers. */
+    scrollbar-width: none; /* Firefox */
+
+    &::-webkit-scrollbar {
+      display: none; /* Chrome, Edge, & Safari */
+    }
+  `,
+};
+
+export const euiCollapsibleNavFooterStyles = ({ euiTheme }: UseEuiTheme) => {
+  return {
+    euiCollapsibleNav__footer: css`
+      background-color: ${euiTheme.colors.emptyShade};
+      ${logicalCSS('border-top', euiTheme.border.thin)}
+    `,
+  };
+};
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_body_footer.test.tsx b/src/components/collapsible_nav_beta/collapsible_nav_body_footer.test.tsx
new file mode 100644
index 00000000000..8493fa725fe
--- /dev/null
+++ b/src/components/collapsible_nav_beta/collapsible_nav_body_footer.test.tsx
@@ -0,0 +1,50 @@
+/*
+ * 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 { shouldRenderCustomStyles } from '../../test/internal';
+import { requiredProps } from '../../test';
+
+import { EuiCollapsibleNavContext } from './context';
+import {
+  EuiCollapsibleNavBody,
+  EuiCollapsibleNavFooter,
+} from './collapsible_nav_body_footer';
+
+describe('EuiCollapsibleNavBody', () => {
+  shouldRenderCustomStyles(<EuiCollapsibleNavBody />);
+
+  it('renders', () => {
+    const { container } = render(<EuiCollapsibleNavBody {...requiredProps} />);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('renders with docked styles', () => {
+    const { container } = render(
+      <EuiCollapsibleNavContext.Provider
+        value={{ side: 'left', isPush: true, isCollapsed: true }}
+      >
+        <EuiCollapsibleNavBody {...requiredProps} />
+      </EuiCollapsibleNavContext.Provider>
+    );
+
+    expect(container.innerHTML).toContain('isPushCollapsed');
+  });
+});
+
+describe('EuiCollapsibleNavFooter', () => {
+  shouldRenderCustomStyles(<EuiCollapsibleNavFooter />);
+
+  it('renders', () => {
+    const { container } = render(
+      <EuiCollapsibleNavFooter {...requiredProps} />
+    );
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_body_footer.tsx b/src/components/collapsible_nav_beta/collapsible_nav_body_footer.tsx
new file mode 100644
index 00000000000..7bd6ebb9a39
--- /dev/null
+++ b/src/components/collapsible_nav_beta/collapsible_nav_body_footer.tsx
@@ -0,0 +1,69 @@
+/*
+ * 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, { useContext } from 'react';
+import classNames from 'classnames';
+
+import { useEuiTheme } from '../../services';
+import {
+  EuiFlyoutBody,
+  EuiFlyoutBodyProps,
+  EuiFlyoutFooter,
+  EuiFlyoutFooterProps,
+} from '../flyout';
+
+import { EuiCollapsibleNavContext } from './context';
+import {
+  euiCollapsibleNavBodyStyles as bodyStyles,
+  euiCollapsibleNavFooterStyles,
+} from './collapsible_nav_body_footer.styles';
+
+/**
+ * These components are incredibly light wrappers around `EuiFlyoutBody`
+ * and `EuiFlyoutFooter` with collapsible nav-specific styling/considerations.
+ *
+ * Note: They are not intended to be used standalone outside of EuiCollapsibleNav
+ */
+
+export const EuiCollapsibleNavBody: EuiFlyoutBodyProps = ({
+  className,
+  ...props
+}) => {
+  const classes = classNames('euiCollapsibleNav__body', className);
+
+  const { isCollapsed, isPush } = useContext(EuiCollapsibleNavContext);
+  const cssStyles = [
+    bodyStyles.euiCollapsibleNav__body,
+    isCollapsed && isPush && bodyStyles.isPushCollapsed,
+  ];
+
+  return (
+    <EuiFlyoutBody
+      className={classes}
+      css={cssStyles}
+      // Since this is a nav, we can almost guarantee there will be clickable
+      // children/links that will enable scrolling. As such, we're optimistically
+      // removing the extra tab stop
+      scrollableTabIndex={-1}
+      {...props}
+    />
+  );
+};
+
+export const EuiCollapsibleNavFooter: EuiFlyoutFooterProps = ({
+  className,
+  ...props
+}) => {
+  const classes = classNames('euiCollapsibleNav__footer', className);
+
+  const euiTheme = useEuiTheme();
+  const styles = euiCollapsibleNavFooterStyles(euiTheme);
+  const cssStyles = [styles.euiCollapsibleNav__footer];
+
+  return <EuiFlyoutFooter className={classes} css={cssStyles} {...props} />;
+};

From 4b31809f537147fe9c38f06c93cb230b3c599643 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Tue, 26 Sep 2023 15:44:48 -0700
Subject: [PATCH 6/7] [architecture] Export subcomponents with `.` namespacing
 - a la `EuiPageTemplate`

+ update stories to use namespaced components instead of direct imports

+ add stories for the new group component
---
 .../collapsible_nav_beta.stories.tsx          | 80 +++++++---------
 .../collapsible_nav_beta.tsx                  | 27 +++++-
 .../collapsible_nav_group.stories.tsx         | 94 +++++++++++++++++++
 3 files changed, 148 insertions(+), 53 deletions(-)
 create mode 100644 src/components/collapsible_nav_beta/collapsible_nav_group/collapsible_nav_group.stories.tsx

diff --git a/src/components/collapsible_nav_beta/collapsible_nav_beta.stories.tsx b/src/components/collapsible_nav_beta/collapsible_nav_beta.stories.tsx
index 4dc29d2e083..b8a21163188 100644
--- a/src/components/collapsible_nav_beta/collapsible_nav_beta.stories.tsx
+++ b/src/components/collapsible_nav_beta/collapsible_nav_beta.stories.tsx
@@ -11,18 +11,15 @@ import type { Meta, StoryObj } from '@storybook/react';
 
 import { EuiHeader, EuiHeaderSection, EuiHeaderSectionItem } from '../header';
 import { EuiPageTemplate } from '../page_template';
-import { EuiFlyout, EuiFlyoutBody, EuiFlyoutFooter } from '../flyout';
+import { EuiFlyout } from '../flyout';
 import { EuiButton } from '../button';
 import { EuiTitle } from '../title';
 
-import {
-  EuiCollapsibleNavItem,
-  EuiCollapsibleNavItemProps,
-} from './collapsible_nav_item';
 import {
   EuiCollapsibleNavBeta,
   EuiCollapsibleNavBetaProps,
-} from './collapsible_nav_beta';
+  EuiCollapsibleNavItemProps,
+} from './';
 
 const meta: Meta<EuiCollapsibleNavBetaProps> = {
   title: 'EuiCollapsibleNavBeta',
@@ -89,9 +86,14 @@ const renderGroup = (
 export const KibanaExample: Story = {
   render: ({ ...args }) => (
     <OpenCollapsibleNav {...args}>
-      <EuiFlyoutBody scrollableTabIndex={-1}>
-        <EuiCollapsibleNavItem title="Home" icon="home" isSelected href="#" />
-        <EuiCollapsibleNavItem
+      <EuiCollapsibleNavBeta.Body>
+        <EuiCollapsibleNavBeta.Item
+          title="Home"
+          icon="home"
+          isSelected
+          href="#"
+        />
+        <EuiCollapsibleNavBeta.Item
           title="Recent"
           icon="clock"
           items={[
@@ -100,7 +102,7 @@ export const KibanaExample: Story = {
             { title: 'Ultricies tellus', icon: 'visMetric', href: '#' },
           ]}
         />
-        <EuiCollapsibleNavItem
+        <EuiCollapsibleNavBeta.Item
           title="Elasticsearch"
           icon="logoElasticsearch"
           href="#"
@@ -119,7 +121,7 @@ export const KibanaExample: Story = {
             ...renderGroup('Security', [{ title: 'API keys', href: '#' }]),
           ]}
         />
-        <EuiCollapsibleNavItem
+        <EuiCollapsibleNavBeta.Item
           title="Enterprise Search"
           icon="logoEnterpriseSearch"
           href="#"
@@ -135,7 +137,7 @@ export const KibanaExample: Story = {
             { title: 'Search experiences', href: '#' },
           ]}
         />
-        <EuiCollapsibleNavItem
+        <EuiCollapsibleNavBeta.Item
           title="Observability"
           icon="logoObservability"
           href="#"
@@ -173,7 +175,7 @@ export const KibanaExample: Story = {
             ]),
           ]}
         />
-        <EuiCollapsibleNavItem
+        <EuiCollapsibleNavBeta.Item
           title="Security"
           icon="logoSecurity"
           href="#"
@@ -230,7 +232,7 @@ export const KibanaExample: Story = {
             },
           ]}
         />
-        <EuiCollapsibleNavItem
+        <EuiCollapsibleNavBeta.Item
           title="Analytics"
           icon="stats"
           href="#"
@@ -240,7 +242,7 @@ export const KibanaExample: Story = {
             { title: 'Visualize library', href: '#' },
           ]}
         />
-        <EuiCollapsibleNavItem
+        <EuiCollapsibleNavBeta.Item
           title="Machine learning"
           icon="indexMapping"
           href="#"
@@ -268,9 +270,9 @@ export const KibanaExample: Story = {
             ]),
           ]}
         />
-      </EuiFlyoutBody>
-      <EuiFlyoutFooter>
-        <EuiCollapsibleNavItem
+      </EuiCollapsibleNavBeta.Body>
+      <EuiCollapsibleNavBeta.Footer>
+        <EuiCollapsibleNavBeta.Item
           title="Developer tools"
           icon="editorCodeBlock"
           href="#"
@@ -281,7 +283,7 @@ export const KibanaExample: Story = {
             { title: 'Painless lab', href: '#' },
           ]}
         />
-        <EuiCollapsibleNavItem
+        <EuiCollapsibleNavBeta.Item
           title="Management"
           icon="gear"
           items={[
@@ -292,7 +294,7 @@ export const KibanaExample: Story = {
             { title: 'Stack management', href: '#' },
           ]}
         />
-        <EuiCollapsibleNavItem
+        <EuiCollapsibleNavBeta.Item
           title="Project settings"
           icon="gear"
           items={[
@@ -314,7 +316,7 @@ export const KibanaExample: Story = {
             },
           ]}
         />
-      </EuiFlyoutFooter>
+      </EuiCollapsibleNavBeta.Footer>
     </OpenCollapsibleNav>
   ),
 };
@@ -323,28 +325,10 @@ export const KibanaExample: Story = {
 export const SecurityExample: Story = {
   render: ({ ...args }) => (
     <OpenCollapsibleNav {...args}>
-      <EuiFlyoutBody scrollableTabIndex={-1}>
-        <EuiCollapsibleNavItem
-          title="Recent"
-          icon="clock"
-          items={[
-            { title: 'Lorem ipsum', icon: 'visMapRegion', href: '#' },
-            { title: 'Consectetur cursus', icon: 'visPie', href: '#' },
-            { title: 'Ultricies tellus', icon: 'visMetric', href: '#' },
-          ]}
-        />
-        <EuiCollapsibleNavItem
-          isSelected
+      <EuiCollapsibleNavBeta.Body>
+        <EuiCollapsibleNavBeta.Group
           title="Security"
           icon="logoSecurity"
-          href="#"
-          // Workaround to always display this section as open and remove the accordion toggle
-          // Rather than baking in a top-level prop to support this behavior, this is likely
-          // the path we'd recommend to Security instead if their use-case isn't standard
-          accordionProps={{
-            forceState: 'open',
-            arrowProps: { css: { display: 'none' } },
-          }}
           items={[
             { title: 'Get started', href: '#' },
             { title: 'Dashboards', href: '#' },
@@ -398,14 +382,14 @@ export const SecurityExample: Story = {
             },
           ]}
         />
-      </EuiFlyoutBody>
-      <EuiFlyoutFooter>
-        <EuiCollapsibleNavItem
+      </EuiCollapsibleNavBeta.Body>
+      <EuiCollapsibleNavBeta.Footer>
+        <EuiCollapsibleNavBeta.Item
           title="Developer tools"
           icon="editorCodeBlock"
           href="#"
         />
-        <EuiCollapsibleNavItem
+        <EuiCollapsibleNavBeta.Item
           title="Project settings"
           icon="gear"
           items={[
@@ -427,7 +411,7 @@ export const SecurityExample: Story = {
             },
           ]}
         />
-      </EuiFlyoutFooter>
+      </EuiCollapsibleNavBeta.Footer>
     </OpenCollapsibleNav>
   ),
 };
@@ -458,10 +442,10 @@ const MockConsumerFlyout: FunctionComponent = () => {
       </EuiButton>
       {flyoutIsOpen && (
         <EuiFlyout onClose={() => setFlyoutOpen(false)}>
-          <EuiFlyoutBody>
+          <EuiCollapsibleNavBeta.Body>
             Some other mock consumer flyout that <strong>should</strong> overlap
             EuiCollapsibleNav
-          </EuiFlyoutBody>
+          </EuiCollapsibleNavBeta.Body>
         </EuiFlyout>
       )}
     </>
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_beta.tsx b/src/components/collapsible_nav_beta/collapsible_nav_beta.tsx
index 94eed977152..5d3a62e91a7 100644
--- a/src/components/collapsible_nav_beta/collapsible_nav_beta.tsx
+++ b/src/components/collapsible_nav_beta/collapsible_nav_beta.tsx
@@ -36,8 +36,9 @@ export type EuiCollapsibleNavBetaProps = CommonProps &
     'side' | 'focusTrapProps' | 'includeFixedHeadersInFocusTrap'
   > & {
     /**
-     * ReactNode(s) to render as navigation flyout content, typically `EuiCollapsibleNavItem`s.
-     * You may also want to use `EuiFlyoutBody` and `EuiFlyoutFooter` for organization.
+     * ReactNode(s) to render as navigation flyout content, typically `EuiCollapsibleNavBeta.Item`s.
+     * You will likely want to use `EuiCollapsibleNavBeta.Body` and `EuiCollapsibleNavBeta.Footer`
+     * for organization.
      */
     children?: ReactNode;
     /**
@@ -76,9 +77,7 @@ export type EuiCollapsibleNavBetaProps = CommonProps &
     'aria-label'?: string;
   };
 
-export const EuiCollapsibleNavBeta: FunctionComponent<
-  EuiCollapsibleNavBetaProps
-> = ({
+const _EuiCollapsibleNavBeta: FunctionComponent<EuiCollapsibleNavBetaProps> = ({
   id,
   children,
   className,
@@ -211,3 +210,21 @@ export const EuiCollapsibleNavBeta: FunctionComponent<
     </EuiCollapsibleNavContext.Provider>
   );
 };
+
+/**
+ * Combined export with subcomponents
+ */
+
+import {
+  EuiCollapsibleNavBody,
+  EuiCollapsibleNavFooter,
+} from './collapsible_nav_body_footer';
+import { EuiCollapsibleNavGroup } from './collapsible_nav_group';
+import { EuiCollapsibleNavItem } from './collapsible_nav_item';
+
+export const EuiCollapsibleNavBeta = Object.assign(_EuiCollapsibleNavBeta, {
+  Body: EuiCollapsibleNavBody,
+  Footer: EuiCollapsibleNavFooter,
+  Group: EuiCollapsibleNavGroup,
+  Item: EuiCollapsibleNavItem,
+});
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_group/collapsible_nav_group.stories.tsx b/src/components/collapsible_nav_beta/collapsible_nav_group/collapsible_nav_group.stories.tsx
new file mode 100644
index 00000000000..e4fc402fc8b
--- /dev/null
+++ b/src/components/collapsible_nav_beta/collapsible_nav_group/collapsible_nav_group.stories.tsx
@@ -0,0 +1,94 @@
+/*
+ * 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, PropsWithChildren } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { EuiHeader, EuiHeaderSection } from '../../header';
+import { EuiPageTemplate } from '../../page_template';
+
+import { EuiCollapsibleNavBeta, EuiCollapsibleNavBetaProps } from '../';
+import {
+  EuiCollapsibleNavGroup,
+  EuiCollapsibleNavGroupProps,
+} from './collapsible_nav_group';
+
+const meta: Meta<EuiCollapsibleNavGroupProps> = {
+  title: 'EuiCollapsibleNavBeta.Group',
+  component: EuiCollapsibleNavGroup,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    title: 'Elastic',
+    icon: 'logoElastic',
+    items: [
+      { title: 'Get started', href: '#' },
+      { title: 'Dashboards', href: '#' },
+      {
+        title: 'Explore',
+        href: '#',
+        items: [
+          { title: 'Hello', href: '#' },
+          { title: 'World', href: '#' },
+        ],
+      },
+    ],
+  },
+  argTypes: {
+    wrapperProps: { control: 'object' },
+  },
+};
+export default meta;
+type Story = StoryObj<EuiCollapsibleNavGroupProps>;
+
+const CollapsibleNavTemplate: FunctionComponent<
+  PropsWithChildren & Partial<EuiCollapsibleNavBetaProps>
+> = ({ children, ...props }) => {
+  return (
+    <>
+      <EuiHeader position="fixed">
+        <EuiHeaderSection>
+          <EuiCollapsibleNavBeta {...props}>
+            <EuiCollapsibleNavBeta.Body>{children}</EuiCollapsibleNavBeta.Body>
+          </EuiCollapsibleNavBeta>
+        </EuiHeaderSection>
+      </EuiHeader>
+      <EuiPageTemplate>
+        <EuiPageTemplate.Section>Hello world</EuiPageTemplate.Section>
+      </EuiPageTemplate>
+    </>
+  );
+};
+
+export const Playground: Story = {
+  render: ({ ...args }) => (
+    <CollapsibleNavTemplate>
+      <EuiCollapsibleNavBeta.Group {...args} />
+    </CollapsibleNavTemplate>
+  ),
+  args: {
+    wrapperProps: { 'data-test-subj': 'test' },
+  },
+};
+
+export const EdgeCaseTesting: Story = {
+  render: ({ ...args }) => (
+    <CollapsibleNavTemplate initialIsCollapsed={true}>
+      <EuiCollapsibleNavBeta.Item href="#" title="Test" icon="faceHappy" />
+      <EuiCollapsibleNavBeta.Item href="#" title="Test" icon="faceSad" />
+      <EuiCollapsibleNavBeta.Group {...args} />
+      <EuiCollapsibleNavBeta.Item href="#" title="Test" icon="faceHappy" />
+      <EuiCollapsibleNavBeta.Item href="#" title="Test" icon="faceSad" />
+      <EuiCollapsibleNavBeta.Group {...args} />
+    </CollapsibleNavTemplate>
+  ),
+  args: {
+    href: '#',
+  },
+};

From c8598ae53bc251e480d7044b3353d41bf8ac0939 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Wed, 27 Sep 2023 09:04:14 -0700
Subject: [PATCH 7/7] [Kibana request] Remove scrolling/overflow hidden on
 baseline nav/flyout

- They're using the `Body` component now anyway which handles scrolling, and they need to be able to display security flyouts outside the nav
---
 .../collapsible_nav_beta/collapsible_nav_beta.styles.ts      | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

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 c7ed86ed0ae..e52f8d8d155 100644
--- a/src/components/collapsible_nav_beta/collapsible_nav_beta.styles.ts
+++ b/src/components/collapsible_nav_beta/collapsible_nav_beta.styles.ts
@@ -8,7 +8,7 @@
 
 import { css } from '@emotion/react';
 import { UseEuiTheme } from '../../services';
-import { logicalCSS, euiYScroll } from '../../global_styling';
+import { logicalCSS } from '../../global_styling';
 import { euiShadowFlat } from '../../themes';
 import { euiHeaderVariables } from '../header/header.styles';
 
@@ -28,9 +28,6 @@ export const euiCollapsibleNavBetaStyles = (euiThemeContext: UseEuiTheme) => {
       /* Fixed header affordance */
       ${logicalCSS('top', fixedHeaderOffset)}
 
-      /* Allow the nav to scroll, in case consumers don't use the body or footer components */
-      ${euiYScroll(euiThemeContext, { height: 'inherit' })}
-
       /* This extra padding is needed for EuiPopovers to have enough
          space to render with the right anchorPosition */
       ${logicalCSS('padding-bottom', euiTheme.size.xs)}