@progress/kendo-react-layout/breadcrumb/BreadcrumbLink.d.ts

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
 *-------------------------------------------------------------------------------------------
 */
import { BaseEvent } from '@progress/kendo-react-common';
import * as React from 'react';
/**
 * Represents the properties of [BreadcrumbLink](https://www.telerik.com/kendo-react-ui/components/layout/api/breadcrumblink) component.
 */
export interface BreadcrumbLinkProps {
    /**
     * Sets the `id` property of the top `div` element of the BreadcrumbLink.
     */
    id?: string;
    /**
     * Sets additional classes to the BreadcrumbLink.
     */
    style?: React.CSSProperties;
    /**
     * Sets additional classes to the BreadcrumbLink.
     */
    className?: string;
    /**
     * Sets the `tabIndex` attribute to the BreadcrumbLink.
     */
    tabIndex?: number;
    /**
     * The Breadcrumb direction `ltr` or `rtl`.
     */
    dir?: string;
    /**
     * Determines the `disabled` mode of the BreadcrumbLink. If `true`, the component is disabled.
     */
    disabled?: boolean;
    /**
     * Represents the `text` of the BreadcrumbLink component.
     */
    text?: string;
    /**
     * Represents the `icon` of the BreadcrumbLink component.
     */
    icon?: React.ReactNode;
    /**
     * Represents the `iconClass` of the BreadcrumbLink component.
     */
    iconClass?: string;
    /**
     * Represents the `onItemSelect` event. Triggered after click on the BreadcrumbLink item.
     */
    onItemSelect?: (event: BaseEvent<BreadcrumbLinkHandle>) => void;
    /**
     * Represents the `onKeyDown` event. Triggered after key down on the BreadcrumbLink item.
     */
    onKeyDown?: (event: BaseEvent<BreadcrumbLinkHandle>) => void;
    /**
     * Sets the `aria-current` value.
     *
     * @remarks
     * This property is related to accessibility.
     */
    ariaCurrent?: boolean;
    /**
     * @hidden
     */
    isLast?: boolean;
    /**
     * @hidden
     */
    isFirst?: boolean;
}
/**
 * Represents the target (element, props, and focus()) of the `BreadcrumbClickEvent`.
 */
export interface BreadcrumbLinkHandle {
    /**
     * The current element or `null` if there is none.
     */
    element: HTMLAnchorElement | null;
    /**
     * The props values of the BreadcrumbLink.
     */
    props: BreadcrumbLinkProps;
    /**
     * The `focus` method of the BreadcrumbLink component.
     */
    focus: () => void;
}
/**
 * Represents the `BreadcrumbLink` component.
 *
 * @example
 * ```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)}
 *   />
 * )}
 * ```
 */
export declare const BreadcrumbLink: React.ForwardRefExoticComponent<BreadcrumbLinkProps & React.RefAttributes<BreadcrumbLinkHandle | null>>;