diff --git a/apps/www/src/components/playground/index.ts b/apps/www/src/components/playground/index.ts
index 9d5f0bfbf..dd0d2bc11 100644
--- a/apps/www/src/components/playground/index.ts
+++ b/apps/www/src/components/playground/index.ts
@@ -30,8 +30,8 @@ export * from './label-examples';
 export * from './link-examples';
 export * from './list-examples';
 export * from './menu-examples';
-export * from './number-field-examples';
 export * from './menubar-examples';
+export * from './number-field-examples';
 export * from './popover-examples';
 export * from './preview-card-examples';
 export * from './radio-examples';
diff --git a/packages/raystack/components/breadcrumb/breadcrumb-item.tsx b/packages/raystack/components/breadcrumb/breadcrumb-item.tsx
index 18c3d82eb..a8ae669c9 100644
--- a/packages/raystack/components/breadcrumb/breadcrumb-item.tsx
+++ b/packages/raystack/components/breadcrumb/breadcrumb-item.tsx
@@ -47,23 +47,29 @@ export const BreadcrumbItem = ({
 
   if (dropdownItems) {
     return (
-      <Menu>
-        <Menu.Trigger className={styles['breadcrumb-dropdown-trigger']}>
-          {label}
-          <ChevronDownIcon className={styles['breadcrumb-dropdown-icon']} />
-        </Menu.Trigger>
-        <Menu.Content className={styles['breadcrumb-dropdown-content']}>
-          {dropdownItems.map((dropdownItem, dropdownIndex) => (
-            <Menu.Item
-              key={dropdownItem.key ?? dropdownIndex}
-              className={styles['breadcrumb-dropdown-item']}
-              onClick={dropdownItem?.onClick}
-            >
-              {dropdownItem.label}
-            </Menu.Item>
-          ))}
-        </Menu.Content>
-      </Menu>
+      <li className={cx(styles['breadcrumb-item'], className)}>
+        <Menu>
+          <Menu.Trigger
+            ref={ref as React.Ref<HTMLButtonElement>}
+            className={styles['breadcrumb-dropdown-trigger']}
+            {...(props as React.ButtonHTMLAttributes<HTMLButtonElement>)}
+          >
+            {label}
+            <ChevronDownIcon className={styles['breadcrumb-dropdown-icon']} />
+          </Menu.Trigger>
+          <Menu.Content className={styles['breadcrumb-dropdown-content']}>
+            {dropdownItems.map((dropdownItem, dropdownIndex) => (
+              <Menu.Item
+                key={dropdownItem.key ?? dropdownIndex}
+                className={styles['breadcrumb-dropdown-item']}
+                onClick={dropdownItem?.onClick}
+              >
+                {dropdownItem.label}
+              </Menu.Item>
+            ))}
+          </Menu.Content>
+        </Menu>
+      </li>
     );
   }
   return (
@@ -77,7 +83,8 @@ export const BreadcrumbItem = ({
           ),
           href,
           ...props,
-          ...renderedElement.props
+          ...renderedElement.props,
+          ref
         },
         label
       )}
diff --git a/packages/raystack/components/breadcrumb/breadcrumb-misc.tsx b/packages/raystack/components/breadcrumb/breadcrumb-misc.tsx
index 83e580d88..48f72a1a2 100644
--- a/packages/raystack/components/breadcrumb/breadcrumb-misc.tsx
+++ b/packages/raystack/components/breadcrumb/breadcrumb-misc.tsx
@@ -8,14 +8,25 @@ import styles from './breadcrumb.module.css';
 export interface BreadcrumbEllipsisProps extends ComponentProps<'span'> {}
 
 export const BreadcrumbEllipsis = ({
+  ref,
   className,
   children = <DotsHorizontalIcon width={20} height={20} />,
   ...props
 }: BreadcrumbEllipsisProps) => {
   return (
-    <span className={cx(styles['breadcrumb-ellipsis'], className)} {...props}>
-      {children}
-    </span>
+    <li
+      className={styles['breadcrumb-item']}
+      role='presentation'
+      aria-hidden='true'
+    >
+      <span
+        className={cx(styles['breadcrumb-ellipsis'], className)}
+        ref={ref}
+        {...props}
+      >
+        {children}
+      </span>
+    </li>
   );
 };
 
@@ -24,14 +35,25 @@ BreadcrumbEllipsis.displayName = 'Breadcrumb.Ellipsis';
 export interface BreadcrumbSeparatorProps extends ComponentProps<'span'> {}
 
 export const BreadcrumbSeparator = ({
+  ref,
   children = <ChevronRightIcon width={12} height={12} />,
   className,
   ...props
 }: BreadcrumbSeparatorProps) => {
   return (
-    <span className={cx(styles['breadcrumb-separator'], className)} {...props}>
-      {children}
-    </span>
+    <li
+      className={styles['breadcrumb-item']}
+      role='presentation'
+      aria-hidden='true'
+    >
+      <span
+        className={cx(styles['breadcrumb-separator'], className)}
+        ref={ref}
+        {...props}
+      >
+        {children}
+      </span>
+    </li>
   );
 };