Getting started in EJ2 TypeScript Breadcrumb control
2 Jun 202311 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.
|-- @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.
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.
- Refer to the
Breadcrumb component dependencies
insystem.config.js
configuration file.
[src/system.config.js]
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
.
@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]
<!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]
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:
npm start
The following example shows a basic Breadcrumb component.
<!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="https://cdn.syncfusion.com/ej2/23.1.36/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.1.36/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container'>
<div class="control-section">
<ul id="breadcrumb"></ul>
</div>
</div>
</body>
</html>
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.
<!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="https://cdn.syncfusion.com/ej2/23.1.36/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.1.36/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container'>
<div class="control-section">
<ul id="breadcrumb"></ul>
</div>
</div>
</body>
</html>
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.
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');
<!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="https://cdn.syncfusion.com/ej2/23.1.36/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.1.36/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></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>