diff --git a/apps/www/src/content/docs/components/breadcrumb/props.ts b/apps/www/src/content/docs/components/breadcrumb/props.ts
index 02b7d4ed9..fd6ea6895 100644
--- a/apps/www/src/content/docs/components/breadcrumb/props.ts
+++ b/apps/www/src/content/docs/components/breadcrumb/props.ts
@@ -22,6 +22,8 @@ export interface BreadcrumbItem {
    * When `dropdownItems` is provided, the `as` and `href` props are ignored.
    */
   dropdownItems?: {
+    /** Optional stable key for list reconciliation. Falls back to index if omitted. */
+    key?: string;
     /** Text to display for the dropdown item */
     label: string;
     /** Callback function when a dropdown item is clicked */
diff --git a/packages/raystack/components/breadcrumb/breadcrumb-item.tsx b/packages/raystack/components/breadcrumb/breadcrumb-item.tsx
index 0b3471ac2..36f00e6f9 100644
--- a/packages/raystack/components/breadcrumb/breadcrumb-item.tsx
+++ b/packages/raystack/components/breadcrumb/breadcrumb-item.tsx
@@ -13,6 +13,7 @@ import { Menu } from '../menu';
 import styles from './breadcrumb.module.css';
 
 export interface BreadcrumbDropdownItem {
+  key?: string;
   label: string;
   onClick?: React.MouseEventHandler<HTMLElement>;
 }
@@ -62,7 +63,7 @@ export const BreadcrumbItem = forwardRef<
           <Menu.Content className={styles['breadcrumb-dropdown-content']}>
             {dropdownItems.map((dropdownItem, dropdownIndex) => (
               <Menu.Item
-                key={dropdownIndex}
+                key={dropdownItem.key ?? dropdownIndex}
                 className={styles['breadcrumb-dropdown-item']}
                 onClick={dropdownItem?.onClick}
               >