From e5cf0d61280ef79f1880b6920f1255b103ac865d Mon Sep 17 00:00:00 2001
From: Melloware <mellowaredev@gmail.com>
Date: Tue, 13 Jun 2023 09:45:52 -0400
Subject: [PATCH] Fix #4504: Breadcrumb allow label in home (#4506)

---
 components/doc/breadcrumb/templatedoc.js |  4 ++--
 components/lib/breadcrumb/BreadCrumb.js  | 20 ++++++++++++++++----
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/components/doc/breadcrumb/templatedoc.js b/components/doc/breadcrumb/templatedoc.js
index 46c54f61a4..0524389352 100644
--- a/components/doc/breadcrumb/templatedoc.js
+++ b/components/doc/breadcrumb/templatedoc.js
@@ -56,10 +56,10 @@ export default function TemplateDemo() {
         typescript: `
 import React from 'react';
 import { BreadCrumb } from 'primereact/breadcrumb';
-import { MenuItem } from 'primereact/menuitem';
+import { MenuItem, MenuItemOptions } from 'primereact/menuitem';
 
 export default function TemplateDoc() {
-    const iconItemTemplate = (item, options) => {
+    const iconItemTemplate = (item: MenuItem, options: MenuItemOptions) => {
         return (
             <a className={options.className}>
                 <span className={item.icon}></span>
diff --git a/components/lib/breadcrumb/BreadCrumb.js b/components/lib/breadcrumb/BreadCrumb.js
index 2cbc47a70a..e580264c3f 100644
--- a/components/lib/breadcrumb/BreadCrumb.js
+++ b/components/lib/breadcrumb/BreadCrumb.js
@@ -1,8 +1,8 @@
 import * as React from 'react';
+import { PrimeReactContext } from '../api/context';
+import { ChevronRightIcon } from '../icons/chevronright';
 import { classNames, IconUtils, mergeProps, ObjectUtils } from '../utils/Utils';
 import { BreadCrumbBase } from './BreadCrumbBase';
-import { ChevronRightIcon } from '../icons/chevronright';
-import { PrimeReactContext } from '../api/context';
 
 export const BreadCrumb = React.memo(
     React.forwardRef((inProps, ref) => {
@@ -40,7 +40,7 @@ export const BreadCrumb = React.memo(
                     return null;
                 }
 
-                const { icon: _icon, target, url, disabled, style, className: _className, template } = home;
+                const { icon: _icon, target, url, disabled, style, className: _className, template, label: _label } = home;
                 const className = classNames('p-breadcrumb-home', { 'p-disabled': disabled }, _className);
                 const iconProps = mergeProps(
                     {
@@ -60,7 +60,19 @@ export const BreadCrumb = React.memo(
                     ptm('action')
                 );
 
-                let content = <a {...actionProps}>{icon}</a>;
+                const labelProps = mergeProps(
+                    {
+                        className: 'p-menuitem-text'
+                    },
+                    ptm('label')
+                );
+                const label = _label && <span {...labelProps}>{_label}</span>;
+                let content = (
+                    <a {...actionProps}>
+                        {icon}
+                        {label}
+                    </a>
+                );
 
                 if (template) {
                     const defaultContentOptions = {