Breadcrumb

23 Sep 20254 minutes to read

Breadcrumb is a graphical user interface that helps to identify or highlight the current location within a hierarchical structure of websites.
The aim is to make the user aware of their current position in a hierarchy of website links.

<nav id='breadcrumb'></nav>
<script>
var breadcrumbObj = new Breadcrumb({ items: [{ text: 'Home', url: '/' }, { text: 'Index', url: './index.html }]});
breadcrumbObj.appendTo("#breadcrumb");
</script>

Properties

activeItem string

Specifies the Url of the active Breadcrumb item.

Defaults to ’’

cssClass string

Defines class/multiple classes separated by a space in the Breadcrumb element.

Defaults to ’’

disabled boolean

Enable or disable the breadcrumb, when set to true, the breadcrumb will be disabled.

Defaults to false

enableActiveItemNavigation boolean

Enable or disable the active item navigation, when set to true, active item will be navigable.

Defaults to false

enableNavigation boolean

Enable or disable the item’s navigation, when set to false, each item navigation will be prevented.

Defaults to true

enablePersistence boolean

Enable or disable persisting component’s state between page reloads.

Defaults to false

enableRtl boolean

Enable or disable rendering component in right to left direction.

Defaults to false

itemTemplate string|Function

Specifies the template for Breadcrumb item.

Defaults to null

items BreadcrumbItemModel[]

Defines the list of Breadcrumb items.

Defaults to []

maxItems number

Specifies an integer to enable overflow behavior when the Breadcrumb items count exceeds and it is based on the overflowMode property.

Defaults to -1

overflowMode string|BreadcrumbOverflowMode

Specifies the overflow mode of the Breadcrumb item when it exceeds maxItems count. The possible values are,

  • Default: Specified maxItems count will be visible and the remaining items will be hidden. While clicking on the previous item, the hidden item will become visible.
  • Collapsed: Only the first and last items will be visible, and the remaining items will be hidden in the collapsed icon. When the collapsed icon is clicked, all items become visible.
  • Menu: Shows the number of breadcrumb items that can be accommodated within the container space, and creates a sub menu with the remaining items.
  • Wrap: Wraps the items on multiple lines when the Breadcrumb’s width exceeds the container space.
  • Scroll: Shows an HTML scroll bar when the Breadcrumb’s width exceeds the container space.
  • None: Shows all the items on a single line.

Defaults to BreadcrumbOverflowMode.Menu

separatorTemplate string|Function

Specifies the separator template for Breadcrumb.

Defaults to ’/’

url string

Defines the Url based on which the Breadcrumb items are generated.

Defaults to ’’

Methods

addEventListener

Adds the handler to the given event listener.

Parameter Type Description
eventName string A String that specifies the name of the event
handler Function Specifies the call to run when the event occurs.

Returns void

appendTo

Appends the control within the given HTML element

Parameter Type Description
selector (optional) string | HTMLElement Target element where control needs to be appended

Returns void

attachUnloadEvent

Adding unload event to persist data when enable persistence true

Returns void

dataBind

When invoked, applies the pending property changes immediately to the component.

Returns void

destroy

Destroys the widget.

Returns void

detachUnloadEvent

Removing unload event to persist data when enable persistence true

Returns void

getLocalData

Returns the persistence data for component

Returns any

getRootElement

Returns the route element of the component

Returns HTMLElement

handleUnload

Handling unload event to persist data when enable persistence true

Returns void

refresh

Applies all the pending property changes and render the component again.

Returns void

removeEventListener

Removes the handler from the given event listener.

Parameter Type Description
eventName string A String that specifies the name of the event to remove
handler Function Specifies the function to remove

Returns void

Inject

Dynamically injects the required modules to the component.

Parameter Type Description
moduleList Function[] ?

Returns void

Events

beforeItemRender EmitType<BreadcrumbBeforeItemRenderEventArgs>

Triggers while rendering each breadcrumb item.

created EmitType<Event>

Triggers once the component rendering is completed.

itemClick EmitType<BreadcrumbClickEventArgs>

Triggers while clicking the breadcrumb item.