ChartBreadcrumbProps

Premium

Represents the properties of [Chart Breadcrumb](% slug api_charts_chartbreadcrumb %) component.

Name	Type	Default	Description
ariaLabel?	string		Represents the label of the Breadcrumb component. jsx <Breadcrumb ariaLabel="Breadcrumb navigation" />
breadcrumbDelimiter?	React.ComponentType<BreadcrumbDelimiterProps>		Represents the Breadcrumb delimiter component. jsx const CustomDelimiter = () => <span>/</span>; <Breadcrumb breadcrumbDelimiter={CustomDelimiter} />
breadcrumbLink?	React.ComponentType<BreadcrumbLinkProps>		Represents the Breadcrumb link component. jsx const CustomLink = (props) => <a {...props} />; <Breadcrumb breadcrumbLink={CustomLink} />
breadcrumbListItem?	React.ComponentType<BreadcrumbListItemProps>		Represents the Breadcrumb list item component. jsx const CustomListItem = (props) => <li {...props} />; <Breadcrumb breadcrumbListItem={CustomListItem} />
breadcrumbOrderedList?	React.ComponentType<BreadcrumbOrderedListProps>		Represents the Breadcrumb ordered list component. jsx const CustomOrderedList = (props) => <ol {...props} />; <Breadcrumb breadcrumbOrderedList={CustomOrderedList} />
className?	string		Sets additional classes to the Breadcrumb. jsx <Breadcrumb className="custom-breadcrumb" />
dir?	"rtl" | "ltr"		The Breadcrumb direction ltr or rtl. jsx <Breadcrumb dir="rtl" />
disabled?	boolean		Determines the disabled mode of the Breadcrumb. If true, the component is disabled. jsx <Breadcrumb disabled={true} />
drilldownState?	ChartDrilldownState		The current drilldown state of the Chart.
iconClassField?	string		Represents the iconClass field. Used for setting the iconClass inside the BreadcrumbLink component. jsx <Breadcrumb iconClassField="customIconClass" />
iconField?	string		Represents the icon field. Used for setting the icon inside the BreadcrumbLink component. jsx <Breadcrumb iconField="customIcon" />
id?	string		Sets the id property of the top div element of the Breadcrumb. jsx <Breadcrumb id="breadcrumb1" />
onDrilldownStateChange?	(event: DrilldownStateChangeEvent) => void		Fires when the user when the user has selected a different drilldown level.
onItemSelect?	(event: BreadcrumbLinkMouseEvent) => void		Represents the onItemSelect event. Triggered after click on the Breadcrumb. jsx <Breadcrumb onItemSelect={(e) => console.log(e.id)} />
onKeyDown?	(event: BreadcrumbLinkKeyDownEvent) => void		Represents the onKeyDown event. Triggered after keyboard click on the Breadcrumb. jsx <Breadcrumb onKeyDown={(e) => console.log(e.id)} />
rootItem?	DataModel		The definition of the breadcrumb root item. The default value is { text: 'Home', icon: <SvgIcon icon={homeIcon} /> }. Where homeIcon is imported from @progress/kendo-svg-icons.
size?	"small" | "large" | "medium"	medium	Specifies the padding of all Breadcrumb elements. The possible values are: small medium large jsx <Breadcrumb size="large" />
style?	React.CSSProperties		Sets additional CSS styles to the Breadcrumb. jsx <Breadcrumb style={{ backgroundColor: 'lightgray' }} />
tabIndex?	number		Sets the tabIndex attribute to the Breadcrumb. jsx <Breadcrumb tabIndex={0} />
textField?	string		Represents the text field. Used for setting the text inside the BreadcrumbLink component. jsx <Breadcrumb textField="customText" />
valueField?	string		Represents the value field. Used for setting the key of the BreadcrumbListItem component and the id of the BreadcrumbLink component. jsx <Breadcrumb valueField="customId" />