Navigation in React Breadcrumb component

7 Oct 202514 minutes to read

The Breadcrumb component enables navigation to specific paths when users click breadcrumb items. To enable navigation functionality, bind the url property to the breadcrumb items.

URL

In the Breadcrumb component, each item represents a URL destination. Breadcrumb items can be configured with either relative or absolute URLs to define navigation paths.

Relative URL

Breadcrumb items with relative URLs contain only the path segment without specifying the complete location or server details. The following example demonstrates breadcrumb items configured with relative URLs.

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 text="Home" url="../"></BreadcrumbItemDirective>
                <BreadcrumbItemDirective text="Breadcrumb" url="./breadcrumb"></BreadcrumbItemDirective>
                <BreadcrumbItemDirective text="Default" url="./breadcrumb/default-functionalities"></BreadcrumbItemDirective>
                <BreadcrumbItemDirective text="Icons" url="./breadcrumb/icons"></BreadcrumbItemDirective>
                <BreadcrumbItemDirective text="Navigation" url="./breadcrumb/navigation"></BreadcrumbItemDirective>
                <BreadcrumbItemDirective text="Overflow" url="./breadcrumb/overflow"></BreadcrumbItemDirective>
            </BreadcrumbItemsDirective>
        </BreadcrumbComponent>);
}
export default App;
ReactDom.render(<App />, document.getElementById('element'));
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 text="Home" url="../"></BreadcrumbItemDirective>
                <BreadcrumbItemDirective text="Breadcrumb" url="./breadcrumb"></BreadcrumbItemDirective>
                <BreadcrumbItemDirective text="Default" url="./breadcrumb/default-functionalities"></BreadcrumbItemDirective>
                <BreadcrumbItemDirective text="Icons" url="./breadcrumb/icons"></BreadcrumbItemDirective>
                <BreadcrumbItemDirective text="Navigation" url="./breadcrumb/navigation"></BreadcrumbItemDirective>
                <BreadcrumbItemDirective text="Overflow" url="./breadcrumb/overflow"></BreadcrumbItemDirective>
            </BreadcrumbItemsDirective>
        </BreadcrumbComponent>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('element'));

Absolute URL

Breadcrumb items with absolute URLs contain the complete path and navigate directly to the specified resource when the absolute URL is bound to the breadcrumb item. The following example demonstrates breadcrumb items configured with absolute URLs.

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 text="Home" url="https://ej2.syncfusion.com/documentation/breadcrumb/introduction"/>
                <BreadcrumbItemDirective text="Getting" url="https://ej2.syncfusion.com/documentation/breadcrumb/getting-started"/>
                <BreadcrumbItemDirective text="Icons" url="https://ej2.syncfusion.com/documentation/breadcrumb/icons"/>
                <BreadcrumbItemDirective text="Navigations" url="https://ej2.syncfusion.com/documentation/breadcrumb/navigation"/>
                <BreadcrumbItemDirective text="Overflow" url="https://ej2.syncfusion.com/documentation/breadcrumb/overflow"/>
            </BreadcrumbItemsDirective>
        </BreadcrumbComponent>);
}
export default App;
ReactDom.render(<App />, document.getElementById('element'));
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 text="Home" url="https://ej2.syncfusion.com/documentation/breadcrumb/introduction" />
                <BreadcrumbItemDirective text="Getting" url="https://ej2.syncfusion.com/documentation/breadcrumb/getting-started" />
                <BreadcrumbItemDirective text="Icons" url="https://ej2.syncfusion.com/documentation/breadcrumb/icons" />
                <BreadcrumbItemDirective text="Navigations" url="https://ej2.syncfusion.com/documentation/breadcrumb/navigation" />
                <BreadcrumbItemDirective text="Overflow" url="https://ej2.syncfusion.com/documentation/breadcrumb/overflow" />
            </BreadcrumbItemsDirective>
        </BreadcrumbComponent>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('element'));

Enable navigation for last Breadcrumb item

By default, the last breadcrumb item (active item) is not clickable. To enable navigation for the last item, set the enableActiveItemNavigation property to true. The following example demonstrates enabling navigation for the last breadcrumb item.

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} enableActiveItemNavigation={true}>
                <BreadcrumbItemsDirective>
                <BreadcrumbItemDirective text="Home" url="https://ej2.syncfusion.com/documentation/breadcrumb/introduction"/>
                <BreadcrumbItemDirective text="Getting" url="https://ej2.syncfusion.com/documentation/breadcrumb/getting-started"/>
                <BreadcrumbItemDirective text="Icons" url="https://ej2.syncfusion.com/documentation/breadcrumb/icons"/>
                <BreadcrumbItemDirective text="Navigations" url="https://ej2.syncfusion.com/documentation/breadcrumb/navigation"/>
                <BreadcrumbItemDirective text="Overflow" url="https://ej2.syncfusion.com/documentation/breadcrumb/overflow"/>
            </BreadcrumbItemsDirective>
            </BreadcrumbComponent>);
}
export default App;
ReactDom.render(<App />, document.getElementById('element'));
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} enableActiveItemNavigation={true}>
                <BreadcrumbItemsDirective>
                <BreadcrumbItemDirective text="Home" url="https://ej2.syncfusion.com/documentation/breadcrumb/introduction" />
                <BreadcrumbItemDirective text="Getting" url="https://ej2.syncfusion.com/documentation/breadcrumb/getting-started" />
                <BreadcrumbItemDirective text="Icons" url="https://ej2.syncfusion.com/documentation/breadcrumb/icons" />
                <BreadcrumbItemDirective text="Navigations" url="https://ej2.syncfusion.com/documentation/breadcrumb/navigation" />
                <BreadcrumbItemDirective text="Overflow" url="https://ej2.syncfusion.com/documentation/breadcrumb/overflow" />
            </BreadcrumbItemsDirective>
            </BreadcrumbComponent>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('element'));

Open URL in new page or tab

To open the breadcrumb item in a new page or tab, set the target property of the required item url to blank in the Breadcrumb component. In the following example, the target property of items url was set to blank by using the beforeItemRender event which locates to the path in the new tab.

import { BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbItemsDirective } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
import * as ReactDom from 'react-dom';
function App() {
    function beforeItemRenderHandler(args) {
        if (args.element.children[0]) {
            args.element.children[0].target = "_blank";
        }
    }
    return (<BreadcrumbComponent enableActiveItemNavigation={true} beforeItemRender={beforeItemRenderHandler}>
                <BreadcrumbItemsDirective>
                <BreadcrumbItemDirective text="Home" url="https://ej2.syncfusion.com/documentation/breadcrumb/introduction"/>
                <BreadcrumbItemDirective text="Getting" url="https://ej2.syncfusion.com/documentation/breadcrumb/getting-started"/>
                <BreadcrumbItemDirective text="Icons" url="https://ej2.syncfusion.com/documentation/breadcrumb/icons"/>
                <BreadcrumbItemDirective text="Navigations" url="https://ej2.syncfusion.com/documentation/breadcrumb/navigation"/>
                <BreadcrumbItemDirective text="Overflow" url="https://ej2.syncfusion.com/documentation/breadcrumb/overflow"/>
            </BreadcrumbItemsDirective>
        </BreadcrumbComponent>);
}
export default App;
ReactDom.render(<App />, document.getElementById('element'));
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.element.children[0]) {
          args.element.children[0].target = "_blank";
        }
    }

    return (
            <BreadcrumbComponent  enableActiveItemNavigation={true} beforeItemRender={beforeItemRenderHandler}>
                <BreadcrumbItemsDirective>
                <BreadcrumbItemDirective text="Home" url="https://ej2.syncfusion.com/documentation/breadcrumb/introduction" />
                <BreadcrumbItemDirective text="Getting" url="https://ej2.syncfusion.com/documentation/breadcrumb/getting-started" />
                <BreadcrumbItemDirective text="Icons" url="https://ej2.syncfusion.com/documentation/breadcrumb/icons" />
                <BreadcrumbItemDirective text="Navigations" url="https://ej2.syncfusion.com/documentation/breadcrumb/navigation" />
                <BreadcrumbItemDirective text="Overflow" url="https://ej2.syncfusion.com/documentation/breadcrumb/overflow" />
            </BreadcrumbItemsDirective>
        </BreadcrumbComponent>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('element'));