BreadcrumbLink

Represents the [BreadcrumbLink](% slug api_layout_breadcrumblink %) component.

A Functional Component.

jsx

import { Breadcrumb, BreadcrumbLink } from '@progress/kendo-react-layout';
const items = [
  {
    id: 'home',
    text: 'Home',
    iconClass: 'k-i-home',
  },
  {
    id: 'products',
    text: 'Products',
  },
  {
    id: 'computer',
    text: 'Computer',
  }
];

const App = () => {
const [data,setData] = React.useState(items);
const handleItemSelect = (event, id) => {
  const itemIndex = data.findIndex((curValue) => curValue.id === id);
  const newData = data.slice(0, itemIndex + 1);
  setData(newData);
};

const CustomLink = (data) => {
 return (
    <BreadcrumbLink
      id={data.id}
      text={data.text}
      onItemSelect={(event) => handleItemSelect(event, data.id)}
    />
  );
};

return (
  <Breadcrumb
    data={data}
    breadcrumbLink={(items) => CustomLink(items)}
  />
)}

ReactDOM.render(<App />, document.querySelector('my-app'));

Name	Type	Default	Description
props	BreadcrumbLinkProps intersected with RefAttributes<"null" | BreadcrumbLinkHandle>		The props of the BreadcrumbLink component.