New to KendoReact? Start a free 30-day trial

BreadcrumbProps

Interface

Represents the props of Breadcrumb component.

Definition

Package:@progress/kendo-react-layout

Properties

ariaLabel?

string

Represents the label of the Breadcrumb component.

Example:

jsx

<Breadcrumb ariaLabel="Breadcrumb navigation" />

breadcrumbDelimiter?

ComponentType<BreadcrumbDelimiterProps>

Represents the Breadcrumb delimiter component.

Example:

jsx

const CustomDelimiter = () => <span>/</span>;
<Breadcrumb breadcrumbDelimiter={CustomDelimiter} />

breadcrumbLink?

ComponentType<BreadcrumbLinkProps>

Represents the Breadcrumb link component.

Example:

jsx

const CustomLink = (props) => <a {...props} />;
<Breadcrumb breadcrumbLink={CustomLink} />

breadcrumbListItem?

ComponentType<BreadcrumbListItemProps>

Represents the Breadcrumb list item component.

Example:

jsx

const CustomListItem = (props) => <li {...props}>{props.children}</li>;
<Breadcrumb breadcrumbListItem={CustomListItem} />

breadcrumbOrderedList?

ComponentType<BreadcrumbOrderedListProps>

Represents the Breadcrumb ordered list component.

Example:

jsx

const CustomOrderedList = (props) => <ol {...props} />;
<Breadcrumb breadcrumbOrderedList={CustomOrderedList} />

className?

string

Sets additional classes to the Breadcrumb.

Example:

jsx

<Breadcrumb className="custom-breadcrumb" />

data

DataModel[]

Represents the data of the Breadcrumb from type DataModel.

Example:

jsx

const data = [{ id: '1', text: 'Home' }, { id: '2', text: 'Products' }];
<Breadcrumb data={data} />

dir?

"ltr" | "rtl"

The Breadcrumb direction ltr or rtl.

Example:

jsx

<Breadcrumb dir="rtl" />

disabled?

boolean

Determines the disabled mode of the Breadcrumb. If true, the component is disabled.

Default:

false

Example:

jsx

<Breadcrumb disabled={true} />

iconClassField?

string

Represents the iconClass field. Used for setting the iconClass inside the BreadcrumbLink component.

Default:

iconClass

Example:

jsx

<Breadcrumb iconClassField="customIconClass" />

iconField?

string

Represents the icon field. Used for setting the icon inside the BreadcrumbLink component.

Default:

icon

Example:

jsx

<Breadcrumb iconField="customIcon" />

id?

string

Sets the id property of the top div element of the Breadcrumb.

Example:

jsx

<Breadcrumb id="breadcrumb1" />

onItemSelect?

(event: BreadcrumbLinkMouseEvent) => void

Represents the onItemSelect event. Triggered after click on the Breadcrumb.

Parameters:eventBreadcrumbLinkMouseEvent

Example:

jsx

<Breadcrumb onItemSelect={(e) => console.log(e.id)} />

onKeyDown?

(event: BreadcrumbLinkKeyDownEvent) => void

Represents the onKeyDown event. Triggered after keyboard click on the Breadcrumb.

Parameters:eventBreadcrumbLinkKeyDownEvent

Example:

jsx

<Breadcrumb onKeyDown={(e) => console.log(e.id)} />

size?

"small" | "medium" | "large"

Specifies the Breadcrumb padding for all elements.

The possible values are:

small
medium
large

Default:

undefined (theme-controlled)

Example:

jsx

<Breadcrumb size="large" />

style?

CSSProperties

Sets additional CSS styles to the Breadcrumb.

Example:

jsx

<Breadcrumb style={{ backgroundColor: 'lightgray' }} />

tabIndex?

number

Sets the tabIndex attribute to the Breadcrumb.

Example:

jsx

<Breadcrumb tabIndex={0} />

textField?

string

Represents the text field. Used for setting the text inside the BreadcrumbLink component.

Default:

text

Example:

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.

Default:

Example:

jsx

<Breadcrumb valueField="customId" />