[PageHeader] Allow multiple breadcrumbs that are not links (#4571)

Signed-off-by: Rafael Grigorian <[email protected]> Co-authored-by: Jan Potoms <[email protected]>
mui · Jan 9, 2025 · 8ab17a3 · 8ab17a3
1 parent ca93987
commit 8ab17a3
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 10 deletions.
diff --git a/docs/pages/toolpad/core/api/page-container.json b/docs/pages/toolpad/core/api/page-container.json
@@ -1,12 +1,12 @@
 {
   "props": {
     "breadcrumbs": {
-      "type": { "name": "arrayOf", "description": "Array&lt;{ path: string, title: string }&gt;" }
+      "type": { "name": "arrayOf", "description": "Array&lt;{ path?: string, title: string }&gt;" }
     },
     "slotProps": {
       "type": {
         "name": "shape",
-        "description": "{ header: { breadcrumbs?: Array&lt;{ path: string, title: string }&gt;, slotProps?: { toolbar: object }, slots?: { toolbar?: elementType }, title?: string } }"
+        "description": "{ header: { breadcrumbs?: Array&lt;{ path?: string, title: string }&gt;, slotProps?: { toolbar: object }, slots?: { toolbar?: elementType }, title?: string } }"
       }
     },
     "slots": {

diff --git a/docs/pages/toolpad/core/api/page-header.json b/docs/pages/toolpad/core/api/page-header.json
@@ -1,7 +1,7 @@
 {
   "props": {
     "breadcrumbs": {
-      "type": { "name": "arrayOf", "description": "Array&lt;{ path: string, title: string }&gt;" }
+      "type": { "name": "arrayOf", "description": "Array&lt;{ path?: string, title: string }&gt;" }
     },
     "slotProps": { "type": { "name": "shape", "description": "{ toolbar: { children?: node } }" } },
     "slots": {

diff --git a/packages/toolpad-core/src/PageContainer/PageContainer.tsx b/packages/toolpad-core/src/PageContainer/PageContainer.tsx
@@ -15,7 +15,7 @@ export interface Breadcrumb {
   /**
    * The path the breadcrumb links to.
    */
-  path: string;
+  path?: string;
 }
 export interface PageContainerSlotProps {
   header: PageHeaderProps;
@@ -89,7 +89,7 @@ PageContainer.propTypes /* remove-proptypes */ = {
    */
   breadcrumbs: PropTypes.arrayOf(
     PropTypes.shape({
-      path: PropTypes.string.isRequired,
+      path: PropTypes.string,
       title: PropTypes.string.isRequired,
     }),
   ),
@@ -104,7 +104,7 @@ PageContainer.propTypes /* remove-proptypes */ = {
     header: PropTypes.shape({
       breadcrumbs: PropTypes.arrayOf(
         PropTypes.shape({
-          path: PropTypes.string.isRequired,
+          path: PropTypes.string,
           title: PropTypes.string.isRequired,
         }),
       ),

diff --git a/packages/toolpad-core/src/PageContainer/PageHeader.tsx b/packages/toolpad-core/src/PageContainer/PageHeader.tsx
@@ -83,9 +83,9 @@ function PageHeader(props: PageHeaderProps) {
       <Breadcrumbs aria-label="breadcrumb">
         {resolvedBreadcrumbs
           ? resolvedBreadcrumbs.map((item, index) => {
-              return index < resolvedBreadcrumbs.length - 1 ? (
+              return item.path ? (
                 <Link
-                  key={item.path}
+                  key={index}
                   component={ToolpadLink}
                   underline="hover"
                   color="inherit"
@@ -94,7 +94,7 @@ function PageHeader(props: PageHeaderProps) {
                   {getItemTitle(item)}
                 </Link>
               ) : (
-                <Typography key={item.path} color="text.primary">
+                <Typography key={index} color="text.primary">
                   {getItemTitle(item)}
                 </Typography>
               );
@@ -120,7 +120,7 @@ PageHeader.propTypes /* remove-proptypes */ = {
    */
   breadcrumbs: PropTypes.arrayOf(
     PropTypes.shape({
-      path: PropTypes.string.isRequired,
+      path: PropTypes.string,
       title: PropTypes.string.isRequired,
     }),
   ),