Search results

Navigation in React Breadcrumb component

08 Dec 2021 / 3 minutes to read

The breadcrumb item navigates to the path while clicking the item. To enable navigation, url property was bound to the items.

URL

In the Breadcrumb component, the item represents the url. The breadcrumb items can be provided with either relative or absolute URL.

Relative URL

The breadcrumb items with relative URL contain only the path but do not locate the path or server. The following example represents the breadcrumb items with relative url.

Source
Preview
index.tsx
index.html
index.css
index.jsx
Copied to clipboard
import { BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbItemsDirective } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
import * as ReactDom from 'react-dom';

class App extends React.Component<{}, {}> {

    public render() {
        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>
        );
    }
}
ReactDom.render(<App />,document.getElementById('element'));
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React ContextMenu</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='element'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>
Copied to clipboard
#loader {
	color: #008cff;
	height: 40px;
	left: 45%;
	position: absolute;
	top: 45%;
	width: 30%;
}

body {
	margin-top: 100px;
	text-align: center;
}
Copied to clipboard
import { BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbItemsDirective } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
import * as ReactDom from 'react-dom';
class App extends React.Component {
    render() {
        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>);
    }
}
ReactDom.render(<App />, document.getElementById('element'));

Absolute URL

The breadcrumb items with Absolute URL contain the path and locate to the resource if the static url is bound to the breadcrumb item. The following example represents the breadcrumb items with static url.

Source
Preview
index.tsx
index.html
index.css
index.jsx
Copied to clipboard
import { BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbItemsDirective } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
import * as ReactDom from 'react-dom';

class App extends React.Component<{}, {}> {

    public render() {
        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>
        );
    }
}
ReactDom.render(<App />,document.getElementById('element'));
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React ContextMenu</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='element'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>
Copied to clipboard
#loader {
	color: #008cff;
	height: 40px;
	left: 45%;
	position: absolute;
	top: 45%;
	width: 30%;
}

body {
	margin-top: 100px;
	text-align: center;
}
Copied to clipboard
import { BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbItemsDirective } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
import * as ReactDom from 'react-dom';
class App extends React.Component {
    render() {
        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>);
    }
}
ReactDom.render(<App />, document.getElementById('element'));

Enable navigation for last Breadcrumb item

The feature enables the last item of the Breadcrumb component by setting the enableActiveItemNavigation property to true. In the following example, the last item of the Breadcrumb was enabled.

Source
Preview
index.tsx
index.html
index.css
index.jsx
Copied to clipboard
import { BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbItemsDirective } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
import * as ReactDom from 'react-dom';

class App extends React.Component<{}, {}> {

    public render() {
        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>
        );
    }
}
ReactDom.render(<App />,document.getElementById('element'));
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React ContextMenu</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='element'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>
Copied to clipboard
#loader {
	color: #008cff;
	height: 40px;
	left: 45%;
	position: absolute;
	top: 45%;
	width: 30%;
}

body {
	margin-top: 100px;
	text-align: center;
}
Copied to clipboard
import { BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbItemsDirective } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
import * as ReactDom from 'react-dom';
class App extends React.Component {
    render() {
        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>);
    }
}
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.

Source
Preview
index.tsx
index.html
index.css
index.jsx
Copied to clipboard
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';

class App extends React.Component<{}, {}> {
    beforeItemRenderHandler(args: BreadcrumbBeforeItemRenderEventArgs): void {
        if (args.element.children[0]) {
          args.element.children[0].target = "_blank";
        }
    }
    public render() {
        return (
              <BreadcrumbComponent  enableActiveItemNavigation={true} beforeItemRender={this.beforeItemRenderHandler.bind(this)}>
                  <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>
        );
    }
}
ReactDom.render(<App />,document.getElementById('element'));
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React ContextMenu</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='element'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>
Copied to clipboard
#loader {
	color: #008cff;
	height: 40px;
	left: 45%;
	position: absolute;
	top: 45%;
	width: 30%;
}

body {
	margin-top: 100px;
	text-align: center;
}
Copied to clipboard
import { BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbItemsDirective } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
import * as ReactDom from 'react-dom';
class App extends React.Component {
    beforeItemRenderHandler(args) {
        if (args.element.children[0]) {
            args.element.children[0].target = "_blank";
        }
    }
    render() {
        return (<BreadcrumbComponent enableActiveItemNavigation={true} beforeItemRender={this.beforeItemRenderHandler.bind(this)}>
                  <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>);
    }
}
ReactDom.render(<App />, document.getElementById('element'));