@progress/kendo-react-layout/breadcrumb/Breadcrumb.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 { BreadcrumbListItemProps } from './BreadcrumbListItem.js';
import { BreadcrumbDelimiterProps } from './BreadcrumbDelimiter.js';
import { BreadcrumbLinkHandle, BreadcrumbLinkProps } from './BreadcrumbLink.js';
import { BreadcrumbOrderedListProps } from './BreadcrumbOrderedList.js';
import * as React from 'react';
/**
 * Represents the props of [Breadcrumb](https://www.telerik.com/kendo-react-ui/components/layout/api/breadcrumb) component.
 */
export interface BreadcrumbProps {
    /**
     * Sets the `id` property of the top `div` element of the Breadcrumb.
     *
     * @example
     * ```jsx
     * <Breadcrumb id="breadcrumb1" />
     * ```
     */
    id?: string;
    /**
     * Sets additional CSS styles to the Breadcrumb.
     *
     * @example
     * ```jsx
     * <Breadcrumb style={{ backgroundColor: 'lightgray' }} />
     * ```
     */
    style?: React.CSSProperties;
    /**
     * Sets additional classes to the Breadcrumb.
     *
     * @example
     * ```jsx
     * <Breadcrumb className="custom-breadcrumb" />
     * ```
     */
    className?: string;
    /**
     * Represents the Breadcrumb ordered list component.
     *
     * @example
     * ```jsx
     * const CustomOrderedList = (props) => <ol {...props} />;
     * <Breadcrumb breadcrumbOrderedList={CustomOrderedList} />
     * ```
     */
    breadcrumbOrderedList?: React.ComponentType<BreadcrumbOrderedListProps>;
    /**
     * Represents the Breadcrumb list item component.
     *
     * @example
     * ```jsx
     * const CustomListItem = (props) => <li {...props}>{props.children}</li>;
     * <Breadcrumb breadcrumbListItem={CustomListItem} />
     * ```
     */
    breadcrumbListItem?: React.ComponentType<BreadcrumbListItemProps>;
    /**
     * Represents the Breadcrumb delimiter component.
     *
     * @example
     * ```jsx
     * const CustomDelimiter = () => <span>/</span>;
     * <Breadcrumb breadcrumbDelimiter={CustomDelimiter} />
     * ```
     */
    breadcrumbDelimiter?: React.ComponentType<BreadcrumbDelimiterProps>;
    /**
     * Represents the Breadcrumb link component.
     *
     * @example
     * ```jsx
     * const CustomLink = (props) => <a {...props} />;
     * <Breadcrumb breadcrumbLink={CustomLink} />
     * ```
     */
    breadcrumbLink?: React.ComponentType<BreadcrumbLinkProps>;
    /**
     * Represents the data of the Breadcrumb from type DataModel.
     *
     * @example
     * ```jsx
     * const data = [{ id: '1', text: 'Home' }, { id: '2', text: 'Products' }];
     * <Breadcrumb data={data} />
     * ```
     */
    data: DataModel[];
    /**
     * Specifies the Breadcrumb padding for all elements.
     *
     * The possible values are:
     * * `small`
     * * `medium`
     * * `large`
     *
     * @default undefined (theme-controlled)
     *
     * @example
     * ```jsx
     * <Breadcrumb size="large" />
     * ```
     */
    size?: 'small' | 'medium' | 'large';
    /**
     * The Breadcrumb direction `ltr` or `rtl`.
     *
     * @example
     * ```jsx
     * <Breadcrumb dir="rtl" />
     * ```
     */
    dir?: 'ltr' | 'rtl';
    /**
     * Sets the `tabIndex` attribute to the Breadcrumb.
     *
     * @example
     * ```jsx
     * <Breadcrumb tabIndex={0} />
     * ```
     */
    tabIndex?: number;
    /**
     * Determines the `disabled` mode of the Breadcrumb. If `true`, the component is disabled.
     *
     * @default false
     *
     * @example
     * ```jsx
     * <Breadcrumb disabled={true} />
     * ```
     */
    disabled?: boolean;
    /**
     * Represents the `value` field. Used for setting the key of the BreadcrumbListItem component and the `id` of the BreadcrumbLink component.
     *
     * @default id
     *
     * @example
     * ```jsx
     * <Breadcrumb valueField="customId" />
     * ```
     */
    valueField?: string;
    /**
     * Represents the `text` field. Used for setting the `text` inside the BreadcrumbLink component.
     *
     * @default text
     *
     * @example
     * ```jsx
     * <Breadcrumb textField="customText" />
     * ```
     */
    textField?: string;
    /**
     * Represents the `icon` field. Used for setting the `icon` inside the BreadcrumbLink component.
     *
     * @default icon
     *
     * @example
     * ```jsx
     * <Breadcrumb iconField="customIcon" />
     * ```
     */
    iconField?: string;
    /**
     * Represents the `iconClass` field. Used for setting the `iconClass` inside the BreadcrumbLink component.
     *
     * @default iconClass
     *
     * @example
     * ```jsx
     * <Breadcrumb iconClassField="customIconClass" />
     * ```
     */
    iconClassField?: string;
    /**
     * Represents the `onItemSelect` event. Triggered after click on the Breadcrumb.
     *
     * @example
     * ```jsx
     * <Breadcrumb onItemSelect={(e) => console.log(e.id)} />
     * ```
     */
    onItemSelect?: (event: BreadcrumbLinkMouseEvent) => void;
    /**
     * Represents the `onKeyDown` event. Triggered after keyboard click on the Breadcrumb.
     *
     * @example
     * ```jsx
     * <Breadcrumb onKeyDown={(e) => console.log(e.id)} />
     * ```
     */
    onKeyDown?: (event: BreadcrumbLinkKeyDownEvent) => void;
    /**
     * Represents the label of the Breadcrumb component.
     *
     * @example
     * ```jsx
     * <Breadcrumb ariaLabel="Breadcrumb navigation" />
     * ```
     *
     * @remarks
     * This property is related to accessibility.
     */
    ariaLabel?: string;
}
/**
 * Represents the DataModel object type.
 */
export interface DataModel {
    /**
     * Represents the `id` of the data object.
     * Used for setting the `key` of the BreadcrumbListItem component and the `id` of the BreadcrumbLink component.
     */
    id?: string;
    /**
     * Represents the `text` used inside the BreadcrumbLink component.
     */
    text?: string;
    /**
     * Represents the `icon` used inside the BreadcrumbLink component.
     */
    icon?: React.ReactNode;
    /**
     * Represents the `iconClass` used inside the BreadcrumbLink component.
     */
    iconClass?: string;
    /**
     * @hidden
     */
    disabled?: boolean;
}
/**
 * Represents the target (element, props, and focus()) of the `BreadcrumbClickEvent`.
 */
export interface BreadcrumbHandle {
    /**
     * The current element or `null` if there is none.
     */
    element: HTMLDivElement | null;
    /**
     * The props values of the Breadcrumb.
     */
    props: BreadcrumbProps;
    /**
     * The `focus` method of the Breadcrumb component.
     */
    focus: () => void;
}
/**
 * Represents the `BreadcrumbLinkMouseEvent`.
 */
export interface BreadcrumbLinkMouseEvent extends BaseEvent<BreadcrumbLinkHandle> {
    /**
     * Represents the `id` of the `BreadcrumbLinkMouseEvent`.
     */
    id?: string;
}
/**
 * Represents the `BreadcrumbLinkKeyDownEvent`.
 */
export interface BreadcrumbLinkKeyDownEvent extends BaseEvent<BreadcrumbLinkHandle> {
    /**
     * Represents the `id` of the `BreadcrumbLinkKeyDownEvent`.
     */
    id?: string;
}
/**
 * Represents the Breadcrumb component.
 */
export declare const Breadcrumb: React.ForwardRefExoticComponent<BreadcrumbProps & React.RefAttributes<BreadcrumbHandle | null>>;