New to KendoReact? Start a free 30-day trial

Represents the BreadcrumbLink component.

Definition

Package:@progress/kendo-react-layout

Properties Interface:BreadcrumbLinkProps

Syntax:

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)}
  />
)}

Properties

Sets the aria-current value.

Sets additional classes to the BreadcrumbLink.

dir?

string

The Breadcrumb direction ltr or rtl.

disabled?

boolean

Determines the disabled mode of the BreadcrumbLink. If true, the component is disabled.

icon?

ReactNode

Represents the icon of the BreadcrumbLink component.

Represents the iconClass of the BreadcrumbLink component.

id?

string

Sets the id property of the top div element of the BreadcrumbLink.

onItemSelect?

(event: BaseEvent​<BreadcrumbLinkHandle>) => void

Represents the onItemSelect event. Triggered after click on the BreadcrumbLink item.

Parameters:eventBaseEvent​<BreadcrumbLinkHandle>

onKeyDown?

(event: BaseEvent​<BreadcrumbLinkHandle>) => void

Represents the onKeyDown event. Triggered after key down on the BreadcrumbLink item.

Parameters:eventBaseEvent​<BreadcrumbLinkHandle>

style?

CSSProperties

Sets additional classes to the BreadcrumbLink.

tabIndex?

number

Sets the tabIndex attribute to the BreadcrumbLink.

text?

string

Represents the text of the BreadcrumbLink component.

References

Represents the target (element, props, and focus()) of the BreadcrumbClickEvent.