Search results

Getting started with React Breadcrumb component

03 Dec 2021 / 4 minutes to read

This section explains how to create a simple Breadcrumb, and configure its available functionalities in React.

Dependencies

The following list of dependencies are required to use the Breadcrumb component in your application.

Copied to clipboard
|-- @syncfusion/ej2-react-navigations
    |-- @syncfusion/ej2-react-base
    |-- @syncfusion/ej2-navigations
        |-- @syncfusion/ej2-base
        |-- @syncfusion/ej2-data
        |-- @syncfusion/ej2-inputs
        |-- @syncfusion/ej2-lists
        |-- @syncfusion/ej2-popups
            |-- @syncfusion/ej2-buttons

Setup your development environment

You can use Create-react-app to setup the applications.

To install create-react-app run the following command.

Copied to clipboard
npm install -g create-react-app

Start a new project using create-react-app command as follows

Copied to clipboard
create-react-app quickstart --scripts-version=react-scripts-ts

cd quickstart
Copied to clipboard
create-react-app quickstart

cd quickstart

‘react-scripts-ts’ is used for creating React app with typescript.

Adding Syncfusion packages

All the available Essential JS 2 packages are published in npmjs.com public registry.

To install Breadcrumb component, use the following command

Copied to clipboard
npm install @syncfusion/ej2-react-navigations --save

The above command installs Breadcrumb dependencies which are required to render the component in the React environment.

Adding Style sheet to the Application

Add Breadcrumb component’s styles as given below in App.css.

Copied to clipboard
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";

Add Breadcrumb to the project

Now, you can create Breadcrumb component in the application. Add Breadcrumb component in src/App.tsx file using the following code snippet.

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

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

    public render() {
        return (<BreadcrumbComponent enableNavigation={false} > </BreadcrumbComponent>);
    }
}
Copied to clipboard
import { BreadcrumbComponent } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
class App extends React.Component {
    render() {
        return (<BreadcrumbComponent enableNavigation={false}> </BreadcrumbComponent>);
    }
}

Run the application

Run the application in the browser using the following command:

Copied to clipboard
npm start

The following example shows a basic Breadcrumb component.

Source
Preview
index.tsx
index.html
index.css
index.jsx
Copied to clipboard
import { enableRipple } from '@syncfusion/ej2-base';
import { BreadcrumbComponent } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);

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

    public render() {
        return (
             <BreadcrumbComponent enableNavigation={false}> </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 { enableRipple } from '@syncfusion/ej2-base';
import { BreadcrumbComponent } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);
class App extends React.Component {
    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.

Add Items to the Breadcrumb Component

Use BreadcrumbItemsDirective tag to bind items for Breadcrumb component. The below example demonstrates the basic rendering of Breadcrumb with items support.

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 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'));
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 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'));

Enable or Disable Navigation

This feature enables or disables the item navigation. By default, the navigation will be enabled when setting Url property. To prevent breadcrumb item navigation, set enableNavigation property as false in Breadcrumb. The below example shows enabling and disabling the navigation of Breadcrumb items.

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 (
            <div id="breadcrumb-control">
                <div class='header'><b>EnableNavigation - false</b></div><br />
                <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>
                <br />
                <br/>
                <div class='header'><b>EnableNavigation - true</b></div><br />
                <BreadcrumbComponent enableNavigation={true}>
                    <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>
            </div>
        );
    }
}
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;
}

#breadcrumb-control {
    margin-left: auto;
    margin-right: auto;
    width: 60%;
}
 
#breadcrumb-control .header {
    text-align: left;
    padding-left: 10px;
}
 
#breadcrumb-control .e-control.e-breadcrumb {
    text-align: left;
}
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 (<div id="breadcrumb-control">
                <div class='header'><b>EnableNavigation - false</b></div><br />
                <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>
                <br />
                <br />
                <div class='header'><b>EnableNavigation - true</b></div><br />
                <BreadcrumbComponent enableNavigation={true}>
                    <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>
            </div>);
    }
}
ReactDom.render(<App />, document.getElementById('element'));