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 (