From f9fbc513535f5410be90982aa514d4ad4e3a50b2 Mon Sep 17 00:00:00 2001
From: paanSinghCoder <gaurav3017@gmail.com>
Date: Wed, 11 Mar 2026 11:55:57 +0530
Subject: [PATCH] fix: Dropdown item breaks <ol> list structure

---
 .../components/breadcrumb/breadcrumb-item.tsx | 36 ++++++++++---------
 1 file changed, 19 insertions(+), 17 deletions(-)

diff --git a/packages/raystack/components/breadcrumb/breadcrumb-item.tsx b/packages/raystack/components/breadcrumb/breadcrumb-item.tsx
index 0b3471ac2..0f9d8d345 100644
--- a/packages/raystack/components/breadcrumb/breadcrumb-item.tsx
+++ b/packages/raystack/components/breadcrumb/breadcrumb-item.tsx
@@ -54,23 +54,25 @@ export const BreadcrumbItem = forwardRef<
 
     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={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 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={dropdownIndex}
+                  className={styles['breadcrumb-dropdown-item']}
+                  onClick={dropdownItem?.onClick}
+                >
+                  {dropdownItem.label}
+                </Menu.Item>
+              ))}
+            </Menu.Content>
+          </Menu>
+        </li>
       );
     }
     return (