BreadcrumbProps

Represents the properties of [Breadcrumb](% slug api_layout_breadcrumb %) 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" />
data	DataModel[]		Represents the data of the Breadcrumb from type DataModel. jsx const data = [{ id: '1', text: 'Home' }, { id: '2', text: 'Products' }]; <Breadcrumb data={data} />
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} />
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" />
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)} />
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" />