New to Kendo UI for VueStart a free 30-day trial

BreadcrumbProps

NameTypeDefaultDescription

ariaLabel?

string

Represents the label of the Breadcrumb component.

Component<BreadcrumbDelimiterProps>

Represents the Breadcrumb delimiter component.

Component<BreadcrumbLinkProps>

Represents the Breadcrumb link component.

Component<BreadcrumbListItemProps>

Represents the Breadcrumb list item component.

Component<BreadcrumbOrderedListProps>

Represents the Breadcrumb ordered list component.

collapseMode?

"none" | "auto" | "wrap"

Sets the Collapse mode of the Breadcrumb. The available values are:

  • auto(default)—Items are automatically collapsed based on the width of the Breadcrumb. First and last item always remain visible.
  • wrap—Items are wrapped on multiple rows when their total width is bigger than the width of the BreadCrumb.
  • none—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 article.

dataItems

BreadcrumbDataModel[]

Represents the dataItems of the Breadcrumb from type BreadcrumbDataModel.

dir?

"rtl" | "ltr"

The Breadcrumb direction ltr or rtl.

disabled?

boolean

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

iconField?

string

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

id?

string

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

onKeydown?

(event: any) => void

Triggered on onKeydown event.

onSelect?

(event: BreadcrumbLinkMouseEvent) => void

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

size?

"small" | "medium" | "large"

medium

Specifies the padding of all Breadcrumb elements.

The possible values are:

  • small
  • medium
  • large

svgIconField?

string

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

tabIndex?

number

Sets the tabIndex attribute to the Breadcrumb.

textField?

string

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

valueField?

string

Represents the value field. Used for setting the key of the BreadcrumbListItem component and the id of the BreadcrumbLink component.

Not finding the help you need?
Contact Support