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

Breadcrumb component is part of IntegralUI Web
a suite of UI Components for development of web apps

If you have any questions, don't hesitate to contact us at support@lidorsystems.com

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:

  • In app template place the button component using the iui-breadcrumb tag name
  • Set values for different properties available
  • Handle the events in your code
// This is required so that the dropdown list appears on top of other elements
@ViewChild('application', {read: ViewContainerRef, static: true}) applicationRef: ViewContainerRef;

public items: Array;
public selItem: any = null;

constructor(){
    this.items = [
        { 
            id: 1,
            text: "Favorites",
            icon: "computer-icons favorites",
            items: [
                { id: 11, pid: 1, text: "Desktop", icon: "computer-icons empty-doc" },
                { id: 12, pid: 1, text: "Downloads", icon: "computer-icons downloads" }
            ]
        },

        // . . . 
        // 
        // The full data set is available at https://stackblitz.com/edit/integralui-breadcrumb-overview
        //
        
    ];

    this.selItem = this.items[0].items[1];
}
                                    
<div #application>
    <iui-breadcrumb [appRef]="applicationRef" [items]="items" [selectedItem]="selItem">
        <ng-template let-item>
            <span>{{item.text}}</span>
        </ng-template>
    </iui-breadcrumb>
</div>
                                    

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.

In this example, each item only shows a text, but you can modify this by adding custom elements to the item template. Here is an example of an item with a router link:

this.items = [
    { 
        id: 1,
        text: "Favorites",
        link: "/favorites-link"
    }

    // . . . 
];
                                    
<div #application>
    <iui-breadcrumb [appRef]="applicationRef" [items]="items" [selectedItem]="selItem">
        <ng-template let-item>
            <div routerLink="{{item.link}}">{{item.text}}</div>
        </ng-template>
    </iui-breadcrumb>
</div>
                                    

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.

List of Available 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
  • appRef - holds a reference to the application view
  • controlStyle - specifies an object 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.

import { Router } from "@angular/router";

// . . . 

constructor(private router: Router){}

itemSelected(e: any){
    let link = '${e.item.link}';
    this.router.navigateByUrl(link).then(result => {
        if (result)
            console.log("Navigation successful!");
        else
            console.log("Navigation has failed!");
    });
}
                                    
<div #application>
    <iui-breadcrumb [appRef]="applicationRef" [items]="items" [selectedItem]="selItem" (selectionChanged)="itemSelected($event)">
        <ng-template let-item>
            <span>{{item.text}}</span>
        </ng-template>
    </iui-breadcrumb>
</div>
                                    

Supported Methods

The following public methods are available:

  • 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.

For this purpose, you can use the controlStyle property, where you need to specify the names of your CSS classes, for breadcrumb state that you want to change: disabled, focused, hovered, normal and selected:

breadcrumbStyle = {
    general: {
        disabled: 'iui-breadcrumb-disabled',
        focused: 'iui-breadcrumb-focused',
        normal: iui-breadcrumb',
        hovered: 'iui-breadcrumb-hovered',
        selected: 'iui-breadcrumb-selected'
    },
    item: {
        general: {
            disabled: 'iui-breadcrumb-item-disabled',
            focused: 'iui-breadcrumb-item-focused',
            normal: iui-breadcrumb-item',
            hovered: 'iui-breadcrumb-item-hovered',
            selected: 'iui-breadcrumb-item-selected'
        },
        expandBox: {
            general: iui-breadcrumb-item-expand-box',
            load: 'iui-breadcrumb-item-expand-box-load',
            expanded: 'iui-breadcrumb-item-expand-box-close',
            collapsed: 'iui-breadcrumb-item-expand-box-open'
        },
        content: {
            disabled: 'iui-breadcrumb-item-content-disabled',
            focused: 'iui-breadcrumb-item-content-focused',
            normal: 'iui-breadcrumb-item-content',
            hovered: 'iui-breadcrumb-item-content-hovered',
            selected: 'iui-breadcrumb-item-content-selected'
        }
    }
}
                    

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.

Newsletter


Sign-up to our newsletter and you will receive news on upcoming events, latest articles, samples and special offers.
Name: Email: *
*By checking this box, I agree to receive a newsletter from Lidor Systems in accordance with the Privacy Policy. I understand that I can unsubscribe from these communications at any time by clicking on the unsubscribe link in all emails.