Data binding in React Breadcrumb component

30 Jan 20238 minutes to read

Items as tag directive

The React Breadcrumb contains BreadcrumbItemsDirective and BreadcrumbItemDirective tags to render items for the component. To bind items, use BreadcrumbItemsDirective tag and BreadcrumbItemDirective tag to bind properties for breadcrumb items.

index.jsx

import { BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbItemsDirective } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
import * as ReactDom from 'react-dom';
function App() {
    return (<BreadcrumbComponent enableNavigation={false}>
            <BreadcrumbItemsDirective>
                <BreadcrumbItemDirective iconCss="e-icons e-home" url="https://ej2.syncfusion.com/home/react.html#platform"/>
                <BreadcrumbItemDirective text="Components" url="https://ej2.syncfusion.com/react/demos/#/material/grid/overview/"/>
                <BreadcrumbItemDirective text="Navigations" url="https://ej2.syncfusion.com/react/demos/#/material/menu/default"/>
                <BreadcrumbItemDirective text="Breadcrumb" url="./breadcrumb/default"/>
            </BreadcrumbItemsDirective>
        </BreadcrumbComponent>);
}
export default App;
ReactDom.render(<App />, document.getElementById('element'));

index.tsx

import { BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbItemsDirective } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
import * as ReactDom from 'react-dom';

function App() {

    return (
        <BreadcrumbComponent enableNavigation={false}>
            <BreadcrumbItemsDirective>
                <BreadcrumbItemDirective iconCss="e-icons e-home" url="https://ej2.syncfusion.com/home/react.html#platform" />
                <BreadcrumbItemDirective text="Components" url="https://ej2.syncfusion.com/react/demos/#/material/grid/overview/" />
                <BreadcrumbItemDirective text="Navigations" url="https://ej2.syncfusion.com/react/demos/#/material/menu/default" />
                <BreadcrumbItemDirective text="Breadcrumb" url="./breadcrumb/default" />
            </BreadcrumbItemsDirective>
        </BreadcrumbComponent>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('element'));

Items based on current URL

The breadcrumb items can be generated from the current URL of the page, if the url property is not provided or when the user does not specify the breadcrumb items using the BreadcrumbItemDirective tag. The following example shows the breadcrumb items that are generated based on the current URL.

index.jsx

import { BreadcrumbComponent } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
import * as ReactDom from 'react-dom';
function App() {
    return (<BreadcrumbComponent enableNavigation={false}></BreadcrumbComponent>);
}
export default App;
ReactDom.render(<App />, document.getElementById('element'));

index.tsx

import { BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbItemsDirective } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
import * as ReactDom from 'react-dom';

function App() {

    return (
        <BreadcrumbComponent enableNavigation={false}></BreadcrumbComponent>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('element'));

This sample is hosted in different location, so the Breadcrumb Component is rendered with different location instead of the actual location.

Static URL

The breadcrumb items can be generated by providing the url property in the component, if the user does not specify the breadcrumb items using the BreadcrumbItemDirective tag. The following example shows the breadcrumb items generated from the provided url in the component.

index.jsx

import { BreadcrumbComponent } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
import * as ReactDom from 'react-dom';
function App() {
    return (<BreadcrumbComponent enableNavigation={false} url="https://ej2.syncfusion.com/demos/breadcrumb/bind-to-location"></BreadcrumbComponent>);
}
export default App;
ReactDom.render(<App />, document.getElementById('element'));

index.tsx

import { BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbItemsDirective } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
import * as ReactDom from 'react-dom';

function App() {

    return (
        <BreadcrumbComponent enableNavigation={false} url="https://ej2.syncfusion.com/demos/breadcrumb/bind-to-location"></BreadcrumbComponent>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('element'));

Customize text when generated items using Url

The breadcrumb items text can be customized by using the beforeItemRender event. In the following example, bind-to-location text was customized as location.

index.jsx

import { BreadcrumbComponent } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
import * as ReactDom from 'react-dom';
function App() {
    function beforeItemRenderHandler(args) {
        if (args.item.text === 'bind-to-location') {
            args.item.text = 'location';
        }
    }
    return (<BreadcrumbComponent enableActiveItemNavigation={true} url="https://ej2.syncfusion.com/demos/breadcrumb/bind-to-location" beforeItemRender={beforeItemRenderHandler}>
        </BreadcrumbComponent>);
}
export default App;
ReactDom.render(<App />, document.getElementById('element'));

index.tsx

import { BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbItemsDirective } from '@syncfusion/ej2-react-navigations';
import { BreadcrumbBeforeItemRenderEventArgs } from '@syncfusion/ej2-navigations';
import * as React from 'react';
import * as ReactDom from 'react-dom';

function App() {
    function beforeItemRenderHandler(args: BreadcrumbBeforeItemRenderEventArgs): void {
        if (args.item.text === 'bind-to-location') {
          args.item.text = 'location';
        }
    }
    return (
        <BreadcrumbComponent  enableActiveItemNavigation={true} url="https://ej2.syncfusion.com/demos/breadcrumb/bind-to-location" beforeItemRender={beforeItemRenderHandler}>
        </BreadcrumbComponent>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('element'));