React

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.

|-- @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.

npm install -g create-react-app

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

create-react-app quickstart --scripts-version=react-scripts-ts

cd quickstart

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

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.

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

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

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

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:

npm start

The following example shows a basic Breadcrumb component.

Source

Preview

index.tsx

index.html

index.css

index.jsx

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

<!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>

#loader {
	color: #008cff;
	height: 40px;
	left: 45%;
	position: absolute;
	top: 45%;
	width: 30%;
}

body {
	margin-top: 100px;
	text-align: center;
}

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.

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

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

<!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>

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

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

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

<!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>

#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;
}

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

Contents

Dependencies
Setup your development environment
Adding Syncfusion packages
Adding Style sheet to the Application
Add Breadcrumb to the project
Run the application
Add Items to the Breadcrumb Component
Enable or Disable Navigation

Contents

Dependencies
Setup your development environment
Adding Syncfusion packages
Adding Style sheet to the Application
Add Breadcrumb to the project
Run the application
Add Items to the Breadcrumb Component
Enable or Disable Navigation

Getting started with React Breadcrumb component

Dependencies

Setup your development environment

Adding Syncfusion packages

Adding Style sheet to the Application

Add Breadcrumb to the project

Run the application

Add Items to the Breadcrumb Component

Enable or Disable Navigation