diff --git a/src/components/breadcrumbs/__snapshots__/breadcrumb.test.tsx.snap b/src/components/breadcrumbs/__snapshots__/breadcrumb.test.tsx.snap
index 116e054b27e2..7a7679856444 100644
--- a/src/components/breadcrumbs/__snapshots__/breadcrumb.test.tsx.snap
+++ b/src/components/breadcrumbs/__snapshots__/breadcrumb.test.tsx.snap
@@ -4,17 +4,17 @@ exports[`EuiBreadcrumbContent breadcrumbs with popovers renders with \`popoverCo
 <body>
   <div>
     <div
-      class="euiPopover euiPopover-isOpen emotion-euiPopover-inline-block-euiBreadcrumb__popoverWrapper"
+      class="euiPopover euiPopover-isOpen emotion-euiPopover-inline-block-euiBreadcrumb__popoverWrapper-page"
       data-test-subj="popover"
     >
       <button
-        class="euiLink emotion-euiLink-subdued-euiBreadcrumb__popoverButton"
+        class="euiLink euiBreadcrumb__content emotion-euiLink-subdued-euiBreadcrumb__popoverButton-euiBreadcrumb__content-page"
         data-test-subj="popoverToggle"
         title="Toggles a popover - Clicking this button will toggle a popover dialog."
         type="button"
       >
         <span
-          class="euiBreadcrumb__content emotion-euiBreadcrumb__content-page"
+          class="emotion-euiBreadcrumb__popoverTruncation"
         >
           Toggles a popover
         </span>
diff --git a/src/components/breadcrumbs/__snapshots__/breadcrumbs.test.tsx.snap b/src/components/breadcrumbs/__snapshots__/breadcrumbs.test.tsx.snap
index 27252750a541..8be50405a28b 100644
--- a/src/components/breadcrumbs/__snapshots__/breadcrumbs.test.tsx.snap
+++ b/src/components/breadcrumbs/__snapshots__/breadcrumbs.test.tsx.snap
@@ -39,15 +39,15 @@ exports[`EuiBreadcrumbs is rendered 1`] = `
       data-test-subj="euiBreadcrumb"
     >
       <div
-        class="euiPopover emotion-euiPopover-inline-block-euiBreadcrumb__popoverWrapper"
+        class="euiPopover emotion-euiPopover-inline-block-euiBreadcrumb__popoverWrapper-page"
       >
         <button
-          class="euiLink emotion-euiLink-subdued-euiBreadcrumb__popoverButton"
+          class="euiLink euiBreadcrumb__content emotion-euiLink-subdued-euiBreadcrumb__popoverButton-euiBreadcrumb__content-page"
           title="See collapsed breadcrumbs"
           type="button"
         >
           <span
-            class="euiBreadcrumb__content emotion-euiBreadcrumb__content-page"
+            class="emotion-euiBreadcrumb__popoverTruncation"
           >
             <span
               aria-label="See collapsed breadcrumbs"
@@ -143,15 +143,15 @@ exports[`EuiBreadcrumbs is rendered with final item as link 1`] = `
       data-test-subj="euiBreadcrumb"
     >
       <div
-        class="euiPopover emotion-euiPopover-inline-block-euiBreadcrumb__popoverWrapper"
+        class="euiPopover emotion-euiPopover-inline-block-euiBreadcrumb__popoverWrapper-page"
       >
         <button
-          class="euiLink emotion-euiLink-subdued-euiBreadcrumb__popoverButton"
+          class="euiLink euiBreadcrumb__content emotion-euiLink-subdued-euiBreadcrumb__popoverButton-euiBreadcrumb__content-page"
           title="See collapsed breadcrumbs"
           type="button"
         >
           <span
-            class="euiBreadcrumb__content emotion-euiBreadcrumb__content-page"
+            class="emotion-euiBreadcrumb__popoverTruncation"
           >
             <span
               aria-label="See collapsed breadcrumbs"
@@ -329,15 +329,15 @@ exports[`EuiBreadcrumbs props max renders 1 item 1`] = `
       data-test-subj="euiBreadcrumb"
     >
       <div
-        class="euiPopover emotion-euiPopover-inline-block-euiBreadcrumb__popoverWrapper"
+        class="euiPopover emotion-euiPopover-inline-block-euiBreadcrumb__popoverWrapper-page"
       >
         <button
-          class="euiLink emotion-euiLink-subdued-euiBreadcrumb__popoverButton"
+          class="euiLink euiBreadcrumb__content emotion-euiLink-subdued-euiBreadcrumb__popoverButton-euiBreadcrumb__content-page"
           title="See collapsed breadcrumbs"
           type="button"
         >
           <span
-            class="euiBreadcrumb__content emotion-euiBreadcrumb__content-page"
+            class="emotion-euiBreadcrumb__popoverTruncation"
           >
             <span
               aria-label="See collapsed breadcrumbs"
@@ -514,15 +514,15 @@ exports[`EuiBreadcrumbs props responsive is rendered 1`] = `
       data-test-subj="euiBreadcrumb"
     >
       <div
-        class="euiPopover emotion-euiPopover-inline-block-euiBreadcrumb__popoverWrapper"
+        class="euiPopover emotion-euiPopover-inline-block-euiBreadcrumb__popoverWrapper-page"
       >
         <button
-          class="euiLink emotion-euiLink-subdued-euiBreadcrumb__popoverButton"
+          class="euiLink euiBreadcrumb__content emotion-euiLink-subdued-euiBreadcrumb__popoverButton-euiBreadcrumb__content-page"
           title="See collapsed breadcrumbs"
           type="button"
         >
           <span
-            class="euiBreadcrumb__content emotion-euiBreadcrumb__content-page"
+            class="emotion-euiBreadcrumb__popoverTruncation"
           >
             <span
               aria-label="See collapsed breadcrumbs"
@@ -617,15 +617,15 @@ exports[`EuiBreadcrumbs props responsive is rendered as false 1`] = `
       data-test-subj="euiBreadcrumb"
     >
       <div
-        class="euiPopover emotion-euiPopover-inline-block-euiBreadcrumb__popoverWrapper"
+        class="euiPopover emotion-euiPopover-inline-block-euiBreadcrumb__popoverWrapper-page"
       >
         <button
-          class="euiLink emotion-euiLink-subdued-euiBreadcrumb__popoverButton"
+          class="euiLink euiBreadcrumb__content emotion-euiLink-subdued-euiBreadcrumb__popoverButton-euiBreadcrumb__content-page"
           title="See collapsed breadcrumbs"
           type="button"
         >
           <span
-            class="euiBreadcrumb__content emotion-euiBreadcrumb__content-page"
+            class="emotion-euiBreadcrumb__popoverTruncation"
           >
             <span
               aria-label="See collapsed breadcrumbs"
@@ -695,15 +695,15 @@ exports[`EuiBreadcrumbs props responsive is rendered with custom breakpoints 1`]
       data-test-subj="euiBreadcrumb"
     >
       <div
-        class="euiPopover emotion-euiPopover-inline-block-euiBreadcrumb__popoverWrapper"
+        class="euiPopover emotion-euiPopover-inline-block-euiBreadcrumb__popoverWrapper-page"
       >
         <button
-          class="euiLink emotion-euiLink-subdued-euiBreadcrumb__popoverButton"
+          class="euiLink euiBreadcrumb__content emotion-euiLink-subdued-euiBreadcrumb__popoverButton-euiBreadcrumb__content-page"
           title="See collapsed breadcrumbs"
           type="button"
         >
           <span
-            class="euiBreadcrumb__content emotion-euiBreadcrumb__content-page"
+            class="emotion-euiBreadcrumb__popoverTruncation"
           >
             <span
               aria-label="See collapsed breadcrumbs"
diff --git a/src/components/breadcrumbs/breadcrumb.styles.ts b/src/components/breadcrumbs/breadcrumb.styles.ts
index 2950c4951e97..508cc82280e8 100644
--- a/src/components/breadcrumbs/breadcrumb.styles.ts
+++ b/src/components/breadcrumbs/breadcrumb.styles.ts
@@ -71,6 +71,8 @@ export const euiBreadcrumbContentStyles = (euiThemeContext: UseEuiTheme) => {
       text-align: center;
       vertical-align: baseline;
     `,
+
+    // Truncation styles
     isTruncated: css`
       ${euiTextTruncate(mathWithUnits(euiTheme.size.base, (x) => x * 10))}
     `,
@@ -80,21 +82,6 @@ export const euiBreadcrumbContentStyles = (euiThemeContext: UseEuiTheme) => {
       ${euiTextTruncate('none')}
     `,
 
-    // Popover styles
-    euiBreadcrumb__popoverButton: css`
-      max-inline-size: 100%;
-      display: inline-flex;
-      align-items: center;
-      gap: ${euiTheme.size.xs};
-    `,
-    euiBreadcrumb__popoverWrapper: css`
-      /* At small container widths, the popover anchor needs to leave room for the breadcrumb separator,
-         which is weird to get an exact width for because it's transformed at an angle */
-      max-inline-size: calc(
-        100% - ${mathWithUnits(euiTheme.size.base, (x) => x + 1)}
-      );
-    `,
-
     // Types
     page: css`
       &:is(a):focus {
@@ -173,3 +160,26 @@ export const euiBreadcrumbContentStyles = (euiThemeContext: UseEuiTheme) => {
     },
   };
 };
+
+export const euiBreadcrumbPopoverStyles = ({ euiTheme }: UseEuiTheme) => {
+  return {
+    euiBreadcrumb__popoverButton: css`
+      max-inline-size: 100%;
+      display: inline-flex;
+      align-items: center;
+      gap: ${euiTheme.size.xs};
+    `,
+    euiBreadcrumb__popoverTruncation: css``,
+    popoverWrapper: {
+      euiBreadcrumb__popoverWrapper: css``,
+      page: css`
+        /* At small container widths, the popover anchor needs to leave room for the breadcrumb separator,
+         which is weird to get an exact width for because it's transformed at an angle */
+        max-inline-size: calc(
+          100% - ${mathWithUnits(euiTheme.size.base, (x) => x + 1)}
+        );
+      `,
+      application: null,
+    },
+  };
+};
diff --git a/src/components/breadcrumbs/breadcrumb.tsx b/src/components/breadcrumbs/breadcrumb.tsx
index 384890107652..4cf65e0ceeb6 100644
--- a/src/components/breadcrumbs/breadcrumb.tsx
+++ b/src/components/breadcrumbs/breadcrumb.tsx
@@ -7,14 +7,17 @@
  */
 
 import React, {
+  PropsWithChildren,
   FunctionComponent,
   HTMLAttributes,
   AriaAttributes,
   MouseEventHandler,
   ReactNode,
   useState,
-  PropsWithChildren,
+  useCallback,
+  forwardRef,
 } from 'react';
+import { CSSInterpolation } from '@emotion/css';
 import classNames from 'classnames';
 
 import { useEuiMemoizedStyles } from '../../services';
@@ -29,6 +32,7 @@ import { useEuiI18n } from '../i18n';
 import {
   euiBreadcrumbStyles,
   euiBreadcrumbContentStyles,
+  euiBreadcrumbPopoverStyles,
 } from './breadcrumb.styles';
 
 export type EuiBreadcrumbProps = Omit<
@@ -129,12 +133,7 @@ export const EuiBreadcrumbContent: FunctionComponent<
   const classes = classNames('euiBreadcrumb__content', className);
 
   const styles = useEuiMemoizedStyles(euiBreadcrumbContentStyles);
-  const cssStyles = [
-    styles.euiBreadcrumb__content,
-    styles[type],
-    truncate && !truncateLastBreadcrumb && styles.isTruncated,
-    truncateLastBreadcrumb && styles.isTruncatedLast,
-  ];
+  const cssStyles = [styles.euiBreadcrumb__content, styles[type]];
   if (type === 'application') {
     if (isOnlyBreadcrumb) {
       cssStyles.push(styles.applicationStyles.onlyChild);
@@ -144,63 +143,50 @@ export const EuiBreadcrumbContent: FunctionComponent<
       cssStyles.push(styles.applicationStyles.lastChild);
     }
   }
+  const truncationStyles = [
+    truncate && !truncateLastBreadcrumb && styles.isTruncated,
+    truncateLastBreadcrumb && styles.isTruncatedLast,
+  ];
 
+  const isBreadcrumbWithPopover = !!popoverContent;
   const isInteractiveBreadcrumb = href || onClick;
   const linkColor = color || (highlightLastBreadcrumb ? 'text' : 'subdued');
   const plainTextColor = highlightLastBreadcrumb ? 'default' : 'subdued'; // Does not inherit `color` prop
   const ariaCurrent = highlightLastBreadcrumb ? ('page' as const) : undefined;
 
-  const isPopoverBreadcrumb = !!popoverContent;
-  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
-  const popoverAriaLabel = useEuiI18n(
-    'euiBreadcrumb.popoverAriaLabel',
-    'Clicking this button will toggle a popover dialog.'
-  );
-
   return (
     <EuiInnerText>
       {(ref, innerText) => {
         const title = innerText === '' ? undefined : innerText;
+        const baseProps = {
+          ref,
+          title,
+          'aria-current': ariaCurrent,
+          className: classes,
+          css: [...cssStyles, ...truncationStyles],
+        };
 
-        const baseProps = { ref, title, 'aria-current': ariaCurrent };
-        const styleProps = { className: classes, css: cssStyles };
-
-        if (isPopoverBreadcrumb) {
-          const closePopover = () => setIsPopoverOpen(false);
+        if (isBreadcrumbWithPopover) {
+          const { css: _, ...popoverButtonProps } = baseProps;
           return (
-            <EuiPopover
-              {...popoverProps}
-              isOpen={isPopoverOpen}
-              closePopover={closePopover}
-              css={!isLastBreadcrumb && styles.euiBreadcrumb__popoverWrapper}
-              button={
-                <EuiLink
-                  {...baseProps}
-                  color={linkColor}
-                  css={styles.euiBreadcrumb__popoverButton}
-                  // Avoid passing href and onClick - should only toggle the popover
-                  onClick={() => setIsPopoverOpen((isOpen) => !isOpen)}
-                  {...rest}
-                >
-                  <span {...styleProps}>{text}</span>
-                  <EuiIcon
-                    type="arrowDown"
-                    size="s"
-                    aria-label={` - ${popoverAriaLabel}`}
-                  />
-                </EuiLink>
-              }
+            <EuiBreadcrumbPopover
+              {...popoverButtonProps}
+              breadcrumbCss={cssStyles}
+              truncationCss={truncationStyles}
+              isLastBreadcrumb={isLastBreadcrumb}
+              type={type}
+              color={linkColor}
+              popoverContent={popoverContent}
+              popoverProps={popoverProps}
+              {...rest}
             >
-              {typeof popoverContent === 'function'
-                ? popoverContent(closePopover)
-                : popoverContent}
-            </EuiPopover>
+              {text}
+            </EuiBreadcrumbPopover>
           );
         } else if (isInteractiveBreadcrumb) {
           return (
             <EuiLink
               {...baseProps}
-              {...styleProps}
               color={linkColor}
               onClick={onClick}
               href={href}
@@ -213,7 +199,7 @@ export const EuiBreadcrumbContent: FunctionComponent<
         } else {
           return (
             <EuiTextColor color={plainTextColor} cloneElement>
-              <span {...baseProps} {...styleProps} {...rest}>
+              <span {...baseProps} {...rest}>
                 {text}
               </span>
             </EuiTextColor>
@@ -224,6 +210,94 @@ export const EuiBreadcrumbContent: FunctionComponent<
   );
 };
 
+type EuiBreadcrumbPopoverProps = HTMLAttributes<HTMLElement> &
+  Pick<EuiBreadcrumbProps, 'popoverProps' | 'popoverContent' | 'color'> &
+  Pick<_EuiBreadcrumbProps, 'type' | 'isLastBreadcrumb'> & {
+    breadcrumbCss?: CSSInterpolation[];
+    truncationCss?: CSSInterpolation[];
+  };
+const EuiBreadcrumbPopover = forwardRef<
+  HTMLButtonElement,
+  EuiBreadcrumbPopoverProps
+>(
+  (
+    {
+      popoverContent,
+      popoverProps,
+      color,
+      type,
+      title,
+      'aria-current': ariaCurrent,
+      className,
+      isLastBreadcrumb,
+      breadcrumbCss = [],
+      truncationCss = [],
+      children,
+      ...rest
+    },
+    ref
+  ) => {
+    const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+    const closePopover = useCallback(() => setIsPopoverOpen(false), []);
+    const togglePopover = useCallback(
+      () => setIsPopoverOpen((isOpen) => !isOpen),
+      []
+    );
+
+    const popoverAriaLabel = useEuiI18n(
+      'euiBreadcrumb.popoverAriaLabel',
+      'Clicking this button will toggle a popover dialog.'
+    );
+
+    const styles = useEuiMemoizedStyles(euiBreadcrumbPopoverStyles);
+    const wrapperStyles = [
+      styles.popoverWrapper.euiBreadcrumb__popoverWrapper,
+      !isLastBreadcrumb && styles.popoverWrapper[type],
+    ];
+    const buttonStyles = [
+      styles.euiBreadcrumb__popoverButton,
+      ...breadcrumbCss,
+    ];
+    const truncationStyles = [
+      styles.euiBreadcrumb__popoverTruncation,
+      ...truncationCss,
+    ];
+
+    return (
+      <EuiPopover
+        {...popoverProps}
+        isOpen={isPopoverOpen}
+        closePopover={closePopover}
+        css={wrapperStyles}
+        button={
+          <EuiLink
+            ref={ref}
+            title={title}
+            aria-current={ariaCurrent}
+            className={className}
+            css={buttonStyles}
+            color={color}
+            onClick={togglePopover}
+            {...rest}
+          >
+            <span css={truncationStyles}>{children}</span>
+            <EuiIcon
+              type="arrowDown"
+              size="s"
+              aria-label={` - ${popoverAriaLabel}`}
+            />
+          </EuiLink>
+        }
+      >
+        {typeof popoverContent === 'function'
+          ? popoverContent(closePopover)
+          : popoverContent}
+      </EuiPopover>
+    );
+  }
+);
+EuiBreadcrumbPopover.displayName = 'EuiBreadcrumbPopover';
+
 export const EuiBreadcrumbCollapsed: FunctionComponent<_EuiBreadcrumbProps> = ({
   children,
   isFirstBreadcrumb,
diff --git a/src/components/header/header_breadcrumbs/__snapshots__/header_breadcrumbs.test.tsx.snap b/src/components/header/header_breadcrumbs/__snapshots__/header_breadcrumbs.test.tsx.snap
index 593e59847fe8..d36a73a77d63 100644
--- a/src/components/header/header_breadcrumbs/__snapshots__/header_breadcrumbs.test.tsx.snap
+++ b/src/components/header/header_breadcrumbs/__snapshots__/header_breadcrumbs.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`EuiHeaderBreadcrumbs is rendered 1`] = `
       data-test-subj="euiBreadcrumb"
     >
       <a
-        class="euiLink euiBreadcrumb__content customClass emotion-euiLink-subdued-euiBreadcrumb__content-application-isTruncated-firstChild"
+        class="euiLink euiBreadcrumb__content customClass emotion-euiLink-subdued-euiBreadcrumb__content-application-firstChild-isTruncated"
         data-test-subj="breadcrumbsAnimals"
         href="#"
         rel="noreferrer"
@@ -54,7 +54,7 @@ exports[`EuiHeaderBreadcrumbs is rendered 1`] = `
     >
       <span
         aria-current="page"
-        class="euiBreadcrumb__content emotion-euiBreadcrumb__content-application-isTruncatedLast-lastChild-euiTextColor-default"
+        class="euiBreadcrumb__content emotion-euiBreadcrumb__content-application-lastChild-isTruncatedLast-euiTextColor-default"
         title="Edit"
       >
         Edit
@@ -79,7 +79,7 @@ exports[`EuiHeaderBreadcrumbs renders only one breadcrumb with all rounded corne
     >
       <span
         aria-current="page"
-        class="euiBreadcrumb__content emotion-euiBreadcrumb__content-application-isTruncatedLast-onlyChild-euiTextColor-default"
+        class="euiBreadcrumb__content emotion-euiBreadcrumb__content-application-onlyChild-isTruncatedLast-euiTextColor-default"
         title="Home"
       >
         Home
