feat: expose key prop

Author: paanSinghCoder

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 */

packages/raystack/components/breadcrumb/breadcrumb-item.tsx

@@ -13,6 +13,8 @@ import { Menu } from '../menu';
 import styles from './breadcrumb.module.css';
 
 export interface BreadcrumbDropdownItem {
+  /** Optional stable key for list reconciliation (use when items can reorder). Falls back to index if omitted. */
+  key?: string;
   label: string;
   onClick?: React.MouseEventHandler<HTMLElement>;
 }
@@ -62,7 +64,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}
               >