JavaScript
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Getting started with JavaScript Breadcrumb control

08 May 2023 / 4 minutes to read

This section explains how to create a simple Breadcrumb, and configure its available functionalities in TypeScript using Essential JS 2 quickstart seed repository.

Dependencies

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

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

Setup your development environment

To get started with the Breadcrumb component, clone Essential JS 2 quickstart, and install the npm packages using the following commands.

Copied to clipboard
git clone https://github.com/syncfusion/ej2-quickstart.git quickstart
cd quickstart
npm install

The project is preconfigured with common settings (src/styles/styles.css, system.config.js) to start all the Essential JS 2 components.

[src/system.config.js]

Copied to clipboard
System.config({
paths: {
    'npm:': './node_modules/',
    'syncfusion:': 'npm:@syncfusion/'
},
map: {
    app: 'app',

    //Syncfusion packages mapping
    "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
    "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
    "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
    "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
    "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
    "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
    "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
    "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
    "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
},
packages: {
    'app': { main: 'app', defaultExtension: 'js' }
}
});

System.import('app.ts').catch(console.error.bind(console)).then(function () {
document.getElementById('loader').style.display = "none";
document.getElementById('container').style.visibility = "visible";
});

Adding Style sheet to the Application

To render Breadcrumb component, need to import navigations and its dependent components styles as given below in styles.css.

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

Adding Breadcrumb component to the application

Add the HTML UL tag with the id attribute as breadcrumb to your index.html file.

[src/index.html]

Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
<title>Essential JS 2 - Breadcrumb</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta name="description" content="Essential JS 2 - Breadcrumb" />
<meta name="author" content="Syncfusion" />
<link rel="shortcut icon" href="resources/favicon.ico" />

<!--style reference from app-->
<link href="/styles/styles.css" rel="stylesheet" />

<!--system js reference and configuration-->
<script src="node_modules/systemjs/dist/system.src.js" type="text/javascript"></script>
<script src="system.config.js" type="text/javascript"></script>
</head>

<body>
<ul id="breadcrumb"></ul>
</body>
</html>

Import the Breadcrumb component in your app.ts file and initialize it with the #breadcrumb.

[src/app/app.ts]

Copied to clipboard
import { BreadcrumbItemModel, Breadcrumb } from '@syncfusion/ej2-navigations';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

new Breadcrumb({
   enableNavigation: false
}, '#breadcrumb');

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
app.ts
index.html
styles.css
Copied to clipboard
import { BreadcrumbItemModel, Breadcrumb } from '@syncfusion/ej2-navigations';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

//Breadcrumb items definition

new Breadcrumb({
   enableNavigation: false
}, '#breadcrumb');
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>Essential JS 2</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <meta name="description" content="Essential JS 2" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-navigations/styles/material.css" rel="stylesheet" />

    <!--style reference from app-->
    <link href="styles.css" rel="stylesheet" />

    <!--system js reference and configuration-->
    <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='loader'>LOADING....</div>
    <div id='container'>
        <div class="control-section">
            <ul id="breadcrumb"></ul>
        </div>
    </div>
</body>

</html>
Copied to clipboard
body {
  margin-top: 100px;
  text-align: center;
}

Adding Breadcrumb items to the project

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

Source
Preview
app.ts
index.html
styles.css
Copied to clipboard
import { BreadcrumbItemModel, Breadcrumb } from '@syncfusion/ej2-navigations';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

//Breadcrumb items definition

let items: BreadcrumbItemModel[] = [
{
    iconCss: 'e-icons e-home',
    url: "https://ej2.syncfusion.com/demos",
},
{
    text: "Components",
    url: "https://ej2.syncfusion.com/demos/#/material/grid/grid-overview",
},
{
    text: "Navigations",
    url: "https://ej2.syncfusion.com/demos/#/material/breadcrumb/default",
},
{
    text: "Breadcrumb",
    url: "./breadcrumb/default",
}
];

new Breadcrumb({
    items: items,
    enableNavigation: false
}, '#breadcrumb');
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>Essential JS 2</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <meta name="description" content="Essential JS 2" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-navigations/styles/material.css" rel="stylesheet" />

    <!--style reference from app-->
    <link href="styles.css" rel="stylesheet" />

    <!--system js reference and configuration-->
    <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='loader'>LOADING....</div>
    <div id='container'>
        <div class="control-section">
            <ul id="breadcrumb"></ul>
        </div>
    </div>
</body>

</html>
Copied to clipboard
body {
  margin-top: 100px;
  text-align: center;
}

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
app.ts
index.html
styles.css
Copied to clipboard
import { BreadcrumbItemModel, Breadcrumb } from '@syncfusion/ej2-navigations';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

//Breadcrumb items definition

let items: BreadcrumbItemModel[] = [
{
    iconCss: 'e-icons e-home',
    url: "https://ej2.syncfusion.com/demos",
},
{
    text: "Components",
    url: "https://ej2.syncfusion.com/demos/#/material/grid/grid-overview",
},
{
    text: "Navigations",
    url: "https://ej2.syncfusion.com/demos/#/material/breadcrumb/default",
},
{
    text: "Breadcrumb",
    url: "./breadcrumb/default",
}
];

new Breadcrumb({
items: items,
enableNavigation: false
}, '#breadcrumb');

new Breadcrumb({
items: items,
}, '#breadcrumb2');
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>Essential JS 2</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <meta name="description" content="Essential JS 2" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-navigations/styles/material.css" rel="stylesheet" />

    <!--style reference from app-->
    <link href="styles.css" rel="stylesheet" />

    <!--system js reference and configuration-->
    <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='loader'>LOADING....</div>
    <div id='container'>
        <div id="breadcrumb-control" class="control-section">
            <div class="header"><b>EnableNavigation - false</b></div><br />
            <nav id="breadcrumb"></nav>
            <br /><br/>
            <div class="header"><b>EnableNavigation - true</b></div><br />
            <nav id="breadcrumb2"></nav>
        </div>
    </div>
</body>

</html>
Copied to clipboard
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;
}
Previous
Next