@progress/kendo-react-layout/breadcrumb/Breadcrumb.js

React Layout components enable you to create a perceptive and intuitive layout of web projects. KendoReact Layout package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2026 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const T=require("react"),n=require("prop-types"),o=require("@progress/kendo-react-common"),q=require("@progress/kendo-react-intl"),L=require("./messages/index.js"),M=require("./BreadcrumbListItem.js"),R=require("./BreadcrumbDelimiter.js"),w=require("./BreadcrumbLink.js"),j=require("./BreadcrumbOrderedList.js");function x(e){const l=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const i in e)if(i!=="default"){const a=Object.getOwnPropertyDescriptor(e,i);Object.defineProperty(l,i,a.get?a:{enumerable:!0,get:()=>e[i]})}}return l.default=e,Object.freeze(l)}const r=x(T),F=r.forwardRef((e,l)=>{const i=r.useRef(null),a=r.useRef(null),y=r.useMemo(()=>e.breadcrumbOrderedList||j.BreadcrumbOrderedList,[e.breadcrumbOrderedList]),I=r.useMemo(()=>e.breadcrumbListItem||M.BreadcrumbListItem,[e.breadcrumbListItem]),D=r.useMemo(()=>e.breadcrumbDelimiter||R.BreadcrumbDelimiter,[e.breadcrumbDelimiter]),k=r.useMemo(()=>e.breadcrumbLink||w.BreadcrumbLink,[e.breadcrumbLink]),E=r.useCallback(()=>{a.current&&a.current.focus()},[a]),B=r.useMemo(()=>e.disabled||!1,[e.disabled]);r.useImperativeHandle(i,()=>({element:a.current,focus:E,props:e})),r.useImperativeHandle(l,()=>i.current);const h=q.useLocalization(),g=o.useDir(a,e.dir),S=t=>{i.current&&o.dispatchEvent(e.onItemSelect,t,t.target,{id:t.target.id})},C=t=>{i.current&&o.dispatchEvent(e.onKeyDown,t,t.target,{id:t.target.id})},v=e.valueField||b.valueField,O=e.iconField||b.iconField,u=e.iconClassField||b.iconClassField,m=e.textField||b.textField,f=e.size;return r.createElement("nav",{"aria-label":e.ariaLabel||h.toLanguageString(L.breadcrumbAriaLabel,L.messages[L.breadcrumbAriaLabel]),id:e.id,style:e.style,ref:a,dir:g,className:o.classNames("k-breadcrumb k-breadcrumb-wrap",{"k-rtl":g==="rtl","k-disabled":B,[`k-breadcrumb-${o.kendoThemeMaps.sizeMap[f]||f}`]:f},e.className)},r.createElement(y,{rootItem:!0},r.createElement(r.Fragment,null,e.data.map((t,c,s)=>{const d=t[v];if(c===0)return r.createElement(I,{key:d,isFirstItem:!0,isLastItem:s.length-1===c},r.createElement(k,{isLast:s.length-1===c,isFirst:!0,id:String(d),icon:t[O]||void 0,iconClass:t[u]?String(t[u]):void 0,text:t[m]?String(t[m]):void 0,disabled:t.disabled||!1,onItemSelect:S,onKeyDown:C,...e}))}))),r.createElement(y,{rootItem:!1},r.createElement(r.Fragment,null,e.data.map((t,c,s)=>{const d=t[v];if(c!==0)return r.createElement(I,{key:d,isFirstItem:!1,isLastItem:s.length-1===c},r.createElement(D,{dir:g}),r.createElement(k,{isLast:s.length-1===c,isFirst:!1,id:String(d),icon:t[O]||void 0,iconClass:t[u]?String(t[u]):void 0,text:t[m]?String(t[m]):void 0,disabled:t.disabled||!1,onItemSelect:S,onKeyDown:C,...e}))}))))}),z={id:n.string,style:n.object,className:n.string,breadcrumbOrderedList:n.elementType,breadcrumbListItem:n.elementType,breadcrumbDelimiter:n.elementType,breadcrumbLink:n.elementType,data:n.arrayOf(n.shape({id:n.string,text:n.string,icon:n.any,iconClass:n.string})),dir:n.oneOf(["ltr","rtl"]),disabled:n.bool,valueField:n.string,textField:n.string,iconField:n.string,iconClassField:n.string,onItemSelect:n.func,ariaLabel:n.string},b={valueField:"id",textField:"text",iconField:"icon",iconClassField:"iconClass"};F.displayName="KendoReactBreadcrumb";F.propTypes=z;exports.Breadcrumb=F;