Introducing JavaScript Breadcrumb Control in Essential JS 2
Tags: javascript, webdev, angular, react
Published: 2021-11-26 12:45:05

---
title: Introducing JavaScript Breadcrumb Control in Essential JS 2
published: true
date: 2021-11-25 11:44:33 UTC
tags: javascript, webdev, angular, react
canonical_url: https://www.syncfusion.com/blogs/post/introducing-javascript-breadcrumb-control-in-essential-js-2.aspx
cover_image: https://www.syncfusion.com/blogs/wp-content/uploads/2021/11/Introducing-JavaScript-Breadcrumb-Control-in-Essential-JS-2-672x372.png
---

We are happy to introduce the new [JavaScript Breadcrumb control](https://www.syncfusion.com/javascript-ui-controls/js-breadcrumb "Link to JavaScript Breadcrumb") in the Essential JS 2 suite.

The Breadcrumb component is a graphical user interface that serves as a navigation header for your web application or site. It helps to identify or highlight the current location within the hierarchical structure of a website.

The Essential JS 2 suite has a huge set of controls, and all these controls possess common web standards and functionalities such as web accessibility, right-to-left rendering, keyboard interaction, modular architecture, and responsiveness, with touch-friendly and lightweight UIs. Now, the Breadcrumb is included in this suite with all these JS 2 features as well as control-specific features.

This blog will provide a walk-through on the new Breadcrumb control, its UI designs, its features, and the platforms it supports.

## Breadcrumb UI design

We have designed the Breadcrumb control to be flexible, responsive, and completely customizable. The following are the two elements of a Breadcrumb control:

- Breadcrumb item: The navigation item of the link.
- Breadcrumb separator: The separator between breadcrumb items.

![Elements of JavaScript Breadcrumb Component](https://www.syncfusion.com/blogs/wp-content/uploads/2021/11/Elements-of-JavaScript-Breadcrumb-Component.png)
<figcaption>Elements of JavaScript Breadcrumb Component</figcaption>

## Use cases

We can use the Breadcrumb control as a navigation header for web applications or websites. Also, we can use it as a secondary navigation tool to identify the current location without navigation.

The following are some real-world scenarios the Breadcrumb control will best fit:

- **E-commerce sites** : The hierarchical categories of a product can be displayed with its parent category in navigation links.
- **Search engines** : Showcase the current location with the parent root in the search results.
- **Support tickets** : Display the current support ticket with its platforms and parent navigation.

## Existing features

The following is the list of key features available in the Breadcrumb control:

- [BindToLocation or URL binding](#bindtolocation-or-url-binding).
- [Items with icons](#items-with-icons).
- [UI customization with custom items and separator templates](#ui-customization-with-custom-item-and-separator-templates).
- [Breadcrumb with overflow](#breadcrumb-with-overflow).
- [Keyboard accessibility and responsiveness](#keyboard-accessibility).

### BindToLocation or URL binding

The BindToLocation feature of the Breadcrumb control generates items automatically using the current location in a web application when both **items** and **URL** properties are not specified.

Alternatively, when an absolute or a relative URL is specified, the items are generated based on the provided URL.

**Note:** Refer to the [Breadcrumb binding example](https://ej2.syncfusion.com/demos/#/bootstrap5/breadcrumb/bind-to-location.html "Link to the Bind to Location in JavaScript Breadcrumb online demo") for more details.

### Items with icons

The JavaScript Breadcrumb control comes with built-in icon support for the visual representation of the items. By default, the Breadcrumb aligns the icons on the left side of the text, but if required, we can place them on the right side.

![JavaScript Breadcrumb displaying items with icons](https://www.syncfusion.com/blogs/wp-content/uploads/2021/11/JavaScript-Breadcrumb-displaying-items-with-icons.png)
<figcaption>JavaScript Breadcrumb Displaying Items with Icons</figcaption>

### UI customization with custom item and separator templates

We can create custom user experiences using the templates.  Also, we can customize both breadcrumb items and separators using the template support. Using this, you can completely modify the appearance of the Breadcrumb with HTML elements and other components.

![Custom items and separator templates in JavaScript Breadcrumb](https://www.syncfusion.com/blogs/wp-content/uploads/2021/11/Custom-item-and-separator-templates-in-JavaScript-Breadcrumb.png)
<figcaption>Custom Items and Separator Templates in JavaScript Breadcrumb</figcaption>

**Note:** Refer to the [Breadcrumb template and customization sample](https://ej2.syncfusion.com/demos/#/bootstrap5/breadcrumb/template-and-customization.html "Link to the Template and Customization in JavaScript Breadcrumb online demo") for more details.

### Breadcrumb with overflow

You can limit the number of items displayed in a breadcrumb control. The following are the overflow modes available:

- **Default** : Shows the maximum number of items possible in the container space and hides the remaining items. Clicking on a previous item will show the hidden items.
- **Collapsed** : Shows the first and last breadcrumb items and hides the remaining items with a collapsed icon. When we click the collapsed icon, all items become visible and navigable.

**Note:** Refer to the [Breadcrumb overflow sample](https://ej2.syncfusion.com/demos/#/bootstrap5/breadcrumb/default.html "Link to the JavaScript Breadcrumb with Overflow online demo") for more details.

### Keyboard accessibility

All our Essential JS 2 suite controls follow keyboard interaction and web accessibility standards. So, users can easily interact with the Breadcrumb control using their keyboard. Use the following keyboard shortcuts to handle the Breadcrumb control:

- **Tab** : To navigate to the next item.
- **Shift + Tab** : To navigate to the previous item.
- **Enter** : To perform click action on an item.

### Responsive and touch-friendly

By default, the Breadcrumb control is both responsive and touch-friendly. It will adapt to all mobile devices based on the screen size. The Breadcrumb control UI automatically changes to overflow mode, when we change the screen size. This enables the control to render adaptively based on the device, providing optimal user experience on phones, tablets, and desktops applications.

## Upcoming features

The Breadcrumb control is now available in preview mode, and we plan to enhance the overflow support with the following modes in future releases:

- **Menu** : Shows the number of breadcrumb items that can be accommodated within the container space and creates a submenu with the remaining items.
- **Wrap** : Wraps the items on multiple lines when the Breadcrumb’s width exceeds the container space.
- **Scroll** : Shows an HTML scroll bar when the Breadcrumb’s width exceeds the container space.
- **None** : Shows all the items on a single line.

## How to use it

We can implement the Breadcrumb control on all major platforms as a navigation tool. It has a huge set of resources for developers, including source code on [GitHub](https://github.com/syncfusion/ej2-javascript-ui-controls/tree/master/controls/navigations "Link to Syncfusion JavaScript demos on GitHub"), live [demos](https://ej2.syncfusion.com/javascript/demos/#/material/breadcrumb/default.html "Link to the Default Functionalities in JavaScript Breadcrumb live demo") in our sample browser, and customization features in the [documentation](https://ej2.syncfusion.com/documentation/breadcrumb/getting-started/ "Documentation link to Getting started with JavaScript Breadcrumb control").

## Supported platforms

The following platforms support Breadcrumb.

<table style="border-collapse: collapse; width: 100%;" border="1">
<tbody>
<tr>
<td style="width: 33.3333%;"><strong>Platform</strong></td>
<td style="width: 33.3333%;"><strong>Live demo</strong></td>
<td style="width: 33.3333%;"><strong>Documentation</strong></td>
</tr>
<tr>
<td style="width: 33.3333%;"><a title="Link to Angular UI controls" href="https://www.syncfusion.com/angular-ui-components">Angular</a></td>
<td style="width: 33.3333%;"><a title="Link to the Angular Breadcrumb live demo" href="https://ej2.syncfusion.com/angular/demos/#/material/breadcrumb/default">Angular Breadcrumb demos</a></td>
<td style="width: 33.3333%;"><a title="Documentation link to Getting started with Angular Breadcrumb" href="https://ej2.syncfusion.com/angular/documentation/breadcrumb/getting-started/">Getting started with Angular Breadcrumb</a></td>
</tr>
<tr>
<td style="width: 33.3333%;"><a title="Link to React UI controls" href="https://www.syncfusion.com/react-ui-components">React</a></td>
<td style="width: 33.3333%;"><a title="Link to the React Breadcrumb live demo" href="https://ej2.syncfusion.com/react/demos/#/material/breadcrumb/default">React Breadcrumb demos</a></td>
<td style="width: 33.3333%;"><a title="Documentation link to Getting started with React Breadcrumb component" href="https://ej2.syncfusion.com/react/documentation/breadcrumb/getting-started/">Getting started with React Breadcrumb</a></td>
</tr>
<tr>
<td style="width: 33.3333%;"><a title="Link to Vue UI controls" href="https://www.syncfusion.com/vue-ui-components">Vue</a></td>
<td style="width: 33.3333%;"><a title="Link to the Vue Breadcrumb live demo" href="https://ej2.syncfusion.com/vue/demos/#/material/breadcrumb/default.html">Vue Breadcrumb demos</a></td>
<td style="width: 33.3333%;"><a title="Documentation link to Getting started with Vue Breadcrumb component" href="https://www.syncfusion.com/vue-ui-components/vue-breadcrumb">Getting started with Vue Breadcrumb</a></td>
</tr>
<tr>
<td style="width: 33.3333%;"><a title="Link to JavaScript UI controls" href="https://www.syncfusion.com/javascript-ui-controls">JavaScript</a></td>
<td style="width: 33.3333%;"><a title="Link to the JavaScript Breadcrumb live demo" href="https://ej2.syncfusion.com/javascript/demos/#/material/breadcrumb/default.html">JavaScript Breadcrumb demos</a></td>
<td style="width: 33.3333%;"><a title="Documentation link to Getting started with JavaScript Breadcrumb" href="https://ej2.syncfusion.com/documentation/breadcrumb/getting-started/#getting-started">Getting started with JavaScript Breadcrumb</a></td>
</tr>
<tr>
<td style="width: 33.3333%;"><a title="Link to ASP.NET MVC UI controls" href="https://www.syncfusion.com/aspnet-mvc-ui-controls">ASP.NET MVC</a></td>
<td style="width: 33.3333%;"><a title="Link to the ASP.NET MVC Breadcrumb live demo" href="https://ej2.syncfusion.com/aspnetmvc/breadcrumb/DefaultFunctionalities#/material">ASP.NET MVC Breadcrumb demos</a></td>
<td style="width: 33.3333%;"><a title="Documentation link to Getting started with ASP.NET MVC Breadcrumb component" href="https://www.syncfusion.com/aspnet-mvc-ui-controls/breadcrumb">Getting started with ASP.NET MVC Breadcrumb</a></td>
</tr>
<tr>
<td style="width: 33.3333%;"><a title="Link to ASP.NET Core UI controls" href="https://www.syncfusion.com/aspnet-core-ui-controls">ASP.NET Core</a></td>
<td style="width: 33.3333%;"><a title="Link to the ASP.NET Core Breadcrumb live demo" href="https://ej2.syncfusion.com/aspnetcore/breadcrumb/DefaultFunctionalities#/material">ASP.NET Core Breadcrumb demos</a></td>
<td style="width: 33.3333%;"><a title="Documentation link to Getting started with ASP.NET Core Breadcrumb component" href="https://www.syncfusion.com/aspnet-core-ui-controls/breadcrumb">Getting started with ASP.NET Core Breadcrumb</a></td>
</tr>
</tbody>
</table>

## Conclusion

We hope you enjoyed this quick introduction to the design and available features of Essential JS 2’s new [Breadcrumb](https://www.syncfusion.com/javascript-ui-controls/js-breadcrumb "Link to JavaScript Breadcrumb") control. If you would like to give it a try, please download our latest version of Essential Studio, [2021 Volume 3](https://www.syncfusion.com/forums/169291/essential-studio-2021-volume-3-main-release-v19-3-0-43-is-available-for-download "Link to download Essential Studio 2021 Volume 3"), and provide your valuable feedback.

If you have any questions, please let us know in the comments section below. You can also contact us through our [support forums](https://www.syncfusion.com/forums "Link to the Syncfusion support forum"), [Direct-Trac](https://www.syncfusion.com/support/directtrac/ "Link to the Syncfusion support system Direct Trac"), or [feedback portal](https://www.syncfusion.com/feedback/ "Link to Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [4 Easy Steps to Embed a JavaScript Control into a Blazor App](https://dev.to/syncfusion/4-easy-steps-to-embed-a-javascript-control-into-a-blazor-app-h6f "Link to 4 Easy Steps to Embed a JavaScript Control into a Blazor App blog")
- [Simple Steps to Validate Data in a JavaScript Spreadsheet](https://dev.to/karthickramasamy08/simple-steps-to-validate-data-in-a-javascript-spreadsheet-4bam-temp-slug-4354251 "Link to Simple Steps to Validate Data in a JavaScript Spreadsheet blog")
- [Easily Configure Syncfusion JavaScript UI Controls in Salesforce](https://dev.to/syncfusion/easily-configure-syncfusion-javascript-ui-controls-in-salesforce-4o32 "Link to Easily Configure Syncfusion JavaScript UI Controls in Salesforce blog")
- [How to Bulk Edit Columns in JavaScript DataGrid](https://dev.to/syncfusion/how-to-bulk-edit-columns-in-javascript-datagrid-3jkb "Link to How to Bulk Edit Columns in JavaScript DataGrid blog")