@progress/kendo-vue-layout/breadcrumb/interfaces/BreadcrumbProps.d.ts

TODO

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2026 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { Component, VNode } from 'vue';
import { BreadcrumbOrderedListProps } from './BreadcrumbOrderedListProps';
import { BreadcrumbLinkProps } from './BreadcrumbLinkProps';
import { BreadcrumbListItemProps } from './BreadcrumbListItemProps';
import { BreadcrumbDelimiterProps } from './BreadcrumbDelimiterProps';
/**
 * Represents the BreadcrumbDataModel object type.
 */
export interface BreadcrumbDataModel {
    /**
     * Represents the `id` of the dataItems 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 `svgIcon` used inside the BreadcrumbLink component.
     */
    svgIcon?: VNode;
    /**
     * Represents the `icon` used inside the BreadcrumbLink component.
     */
    icon?: VNode;
    /**
     * @hidden
     */
    disabled?: boolean;
}
/**
 * Represents the `BreadcrumbLinkMouseEvent`.
 */
export interface BreadcrumbLinkMouseEvent {
    /**
     * Represents the `id` of the `BreadcrumbLinkMouseEvent`.
     */
    id?: string;
    /**
     * A Vue native DOM event.
     */
    nativeEvent: any;
}
export interface BreadcrumbProps {
    /**
     * Sets the `id` property of the top `div` element of the Breadcrumb.
     */
    id?: string;
    /**
     * Represents the Breadcrumb ordered list component.
     */
    breadcrumbOrderedList?: Component<BreadcrumbOrderedListProps>;
    /**
     * Represents the Breadcrumb list item component.
     */
    breadcrumbListItem?: Component<BreadcrumbListItemProps>;
    /**
     * Represents the Breadcrumb delimiter component.
     */
    breadcrumbDelimiter?: Component<BreadcrumbDelimiterProps>;
    /**
     * Represents the Breadcrumb link component.
     */
    breadcrumbLink?: Component<BreadcrumbLinkProps>;
    /**
     * Represents the dataItems of the Breadcrumb from type BreadcrumbDataModel.
     */
    dataItems: BreadcrumbDataModel[];
    /**
     * Specifies the padding of all Breadcrumb elements.
     *
     * The possible values are:
     * * `small`
     * * `medium`
     * * `large`
     *
     * @default `undefined`
     */
    size?: 'small' | 'medium' | 'large';
    /**
     * The Breadcrumb direction `ltr` or `rtl`.
     */
    dir?: 'ltr' | 'rtl';
    /**
     * Sets the `tabIndex` attribute to the Breadcrumb.
     */
    tabIndex?: number;
    /**
     * Sets the Collapse mode of the Breadcrumb.
     * The available values are:
     * - `auto`(default)&mdash;Items are automatically collapsed based on the width of the Breadcrumb. First and last item always remain visible.
     * - `wrap`&mdash;Items are wrapped on multiple rows when their total width is bigger than the width of the BreadCrumb.
     * - `none`&mdash;All items are expanded on the same row. This scenario is useful when the Breadcrumb needs to be scrolled.
     *
     * For more information and example refer to the [Collapse Modes]({% slug collapse_modes_breadcrumb %}) article.
     */
    collapseMode?: 'auto' | 'wrap' | 'none';
    /**
     * Determines the `disabled` mode of the Breadcrumb. If `true`, the component is disabled.
     */
    disabled?: boolean;
    /**
     * Represents the `value` field. Used for setting the key of the BreadcrumbListItem component and the `id` of the BreadcrumbLink component.
     */
    valueField?: string;
    /**
     * Represents the `text` field. Used for setting the `text` inside the BreadcrumbLink component.
     */
    textField?: string;
    /**
     * Represents the `svgIcon` field. Used for setting the `svgIcon` inside the BreadcrumbLink component.
     */
    svgIconField?: string;
    /**
     * Represents the `icon` field. Used for setting the `icon` inside the BreadcrumbLink component.
     */
    iconField?: string;
    /**
     * Represents the `onSelect` event. Triggered after click on the Breadcrumb.
     */
    onSelect?: (event: BreadcrumbLinkMouseEvent) => void;
    /**
     * Triggered on onKeydown event.
     */
    onKeydown?: (event: any) => void;
    /**
     * Represents the label of the Breadcrumb component.
     */
    ariaLabel?: string;
}