{}}>
+
+
+
+
+ {}}
+ title="Button with no icon"
+ />
+ {} }}
+ title="Button with icon"
+ icon="home"
+ />
+
+
+ {} },
+ { ...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,
+ },
+ ],
+ },
+ ],
+ },
+ ]}
+ />
+
+
+
+
+
+
+
+
+ ),
+};
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
new file mode 100644
index 00000000000..1250997a4f4
--- /dev/null
+++ b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.styles.ts
@@ -0,0 +1,63 @@
+/*
+ * 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,
+ logicalShorthandCSS,
+ euiFontSize,
+} from '../../../global_styling';
+import { euiButtonColor } from '../../../themes/amsterdam/global_styling/mixins/button';
+
+/**
+ * Style variables shared between accordion, link, and sub items
+ */
+export const euiCollapsibleNavItemVariables = (
+ euiThemeContext: UseEuiTheme
+) => {
+ const { euiTheme } = euiThemeContext;
+
+ return {
+ height: euiTheme.size.xl,
+ padding: euiTheme.size.s,
+ ...euiFontSize(euiThemeContext, 's'),
+ animation: `${euiTheme.animation.normal} ease-in-out`, // Matches EuiButton
+ borderRadius: euiTheme.border.radius.small,
+ backgroundHoverColor: euiTheme.colors.lightestShade,
+ backgroundSelectedColor: euiButtonColor(euiThemeContext, 'text')
+ .backgroundColor,
+ color: euiTheme.colors.text,
+ rightIconColor: euiTheme.colors.disabledText,
+ };
+};
+
+/**
+ * Title styles
+ */
+
+export const euiCollapsibleNavItemTitleStyles = {
+ euiCollapsibleNavItem__title: css`
+ 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
new file mode 100644
index 00000000000..4690369cd7b
--- /dev/null
+++ b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.test.tsx
@@ -0,0 +1,181 @@
+/*
+ * 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 { EuiCollapsibleNavItem } from './collapsible_nav_item';
+
+describe('EuiCollapsibleNavItem', () => {
+ shouldRenderCustomStyles(
+