Overview of IntegralUI Breadcrumb

IntegralUI Breadcrumb is a native web component for Angular, React and Vue used for navigation, where each item can have a link that is automatically separated. In this article, you will find general information about the breadcrumb component, including its properties, events and methods that you can use

In this example, there is a small tree hierarchy where only currently selected path is shown. Initially item named 'Downloads' is selected, and the Breadcrumb shows the whole path that leads to this item. By clicking on the separator (arrow button), a dropdown list will appear where you can select a different item.

By default, links are not created, but you can customize the item template and add your own links either using the hyperlink tag or set navigation through code by handling the selectionChanged event.

How to Use IntegralUI Breadcrumb in Angular, React and Vue

To use the Breadcrumb component you need to do the following:

• Import the Breadcrumb component
• In app template place the component using the iui-breadcrumb tag name
• Set values for different properties available
• Handle the events in your code

• JavaScript
• Angular
• React
• Vue

The component structure is simple; it consists of an item and separator. The item can be a label or any custom content you provide. As for the separator, by default it is an arrow which when clicked will display a dropdown list, from where you can navigate among different items. You can set a different icon for the separator using CSS.

If the selected item is deep into the tree hierarchy and the breadcrumb size is too small to display the full path, its layout will change. The breadcrumb will show only the last items from the full path, and in beginning, a menu button will appear with a dropdown list of all hidden parent items.

The data source that contains the tree hierarchy main contains different names for the item object fields. You can still use this data, but you need at first to map the field names with the ones used by the Breadcrumb component. For this purpose use the dataFields property, this holds an object that will replace the built-in field names with your own.

Properties, Events and Methods in IntegralUI Breadcrumb

Supported Properties

You can use the following properties to change the appearance and behavior of the Breadcrumb component:

• allowAnimation - determines whether changes to the breadcrumb are animated or not
• customStyle - specifies a CSS that contains all style settings for the component
• data - specifies an object that holds data related to the component
• dataFields - specifies an object that map the fields names from data source to the ones used by the component
• dropDownWidth - specifies the width of the dropdown window
• enabled - determines whether breadcrumb is enabled or disabled
• items - gets or sets a collection of tree items that are assigned to the component
• name - uniquely identifies the component
• selectedItem - an object that points to the currently selected item
• size - specifies the component width and height
• state - specifies the component state: disabled, hovered, etc.

Using the above properties, you can customize the Breadcrumb component in a way best suited for your application.

Supported Events

Here is a list of available events:

• enabledChanged - occurs when component is enabled or disabled
• selectionChanged - occurs when selectedItem property value changes
• sizeChanged - occurs when component size changes
• stateChanged - occurs when component state changed: disabled, normal, hovered, selected

The selectionChanged event is fired, whenever a new item is selected. You can handle this event in your code and add specific action based on item selected. For example, instead of using a router link in the item template, you can select a different route through code, based on selected item.

• JavaScript
• Angular
• React
• Vue

Supported Methods

The following public methods are available:

• refresh - refreshes the component view
• updateLayout - updates the component layout

How to Customize the Breadcrumb Appearance

You can modify the breadcrumb appearance using CSS. You can provide your own CSS classes that will override the default component appearance or change it using custom properties. For example:

[id="breadcrumb-overview"] {
    --breadcrumb-background: #fefefe;
    --breadcrumb-border-color: #e5e5e5;
    --breadcrumb-cursor: pointer;
    --breadcrumb-root-button-margin: 6px 0 0 0;
    --breadcrumb-item-expand-margin: 2px 0 0 0;
}
                    

To disable animations of the breadcrumb state, you can simply set the allowAnimation property to false.

Conclusion

IntegralUI Breadcrumb is a web component that you can use in Angular, React and Vue. You can use the component to display the full path to the current page and navigate among other pages that exists as part of provided tree hierarchy. Using different properties and events and by providing your own CSS classes, you can customize the breadcrumb appearance and behavior.

The Breadcrumb component is part of IntegralUI Web.