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.
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 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>);
}
}
ReactDom.render(<App />, document.getElementById('element'));
<!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/20.1.55/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/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>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
body {
margin-top: 100px;
text-align: center;
}
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 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>
);
}
}
ReactDom.render(<App />,document.getElementById('element'));
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.
import { BreadcrumbComponent } 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}></BreadcrumbComponent>);
}
}
ReactDom.render(<App />, document.getElementById('element'));
<!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/20.1.55/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/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>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
body {
margin-top: 100px;
text-align: center;
}
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}></BreadcrumbComponent>
);
}
}
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.
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.
import { BreadcrumbComponent } 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} url="https://ej2.syncfusion.com/demos/breadcrumb/bind-to-location"></BreadcrumbComponent>);
}
}
ReactDom.render(<App />, document.getElementById('element'));
<!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/20.1.55/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/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>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
body {
margin-top: 100px;
text-align: center;
}
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} url="https://ej2.syncfusion.com/demos/breadcrumb/bind-to-location"></BreadcrumbComponent>
);
}
}
ReactDom.render(<App />,document.getElementById('element'));
The breadcrumb items text can be customized by using the beforeItemRender
event. In the following example, bind-to-location
text was customized as location
.
import { BreadcrumbComponent } 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.item.text === 'bind-to-location') {
args.item.text = 'location';
}
}
render() {
return (<BreadcrumbComponent enableActiveItemNavigation={true} url="https://ej2.syncfusion.com/demos/breadcrumb/bind-to-location" beforeItemRender={this.beforeItemRenderHandler.bind(this)}>
</BreadcrumbComponent>);
}
}
ReactDom.render(<App />, document.getElementById('element'));
<!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/20.1.55/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/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>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
body {
margin-top: 100px;
text-align: center;
}
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.item.text === 'bind-to-location') {
args.item.text = 'location';
}
}
public render() {
return (
<BreadcrumbComponent enableActiveItemNavigation={true} url="https://ej2.syncfusion.com/demos/breadcrumb/bind-to-location" beforeItemRender={this.beforeItemRenderHandler.bind(this)}>
</BreadcrumbComponent>
);
}
}
ReactDom.render(<App />,document.getElementById('element'));