Introducing JavaScript Breadcrumb Control in Essential JS 2 | Syncfusion Blogs
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (172).NET Core  (29).NET MAUI  (192)Angular  (107)ASP.NET  (51)ASP.NET Core  (82)ASP.NET MVC  (89)Azure  (40)Black Friday Deal  (1)Blazor  (209)BoldSign  (12)DocIO  (24)Essential JS 2  (106)Essential Studio  (200)File Formats  (63)Flutter  (131)JavaScript  (219)Microsoft  (118)PDF  (80)Python  (1)React  (98)Streamlit  (1)Succinctly series  (131)Syncfusion  (882)TypeScript  (33)Uno Platform  (3)UWP  (4)Vue  (45)Webinar  (49)Windows Forms  (61)WinUI  (68)WPF  (157)Xamarin  (161)XlsIO  (35)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (8)Business intelligence  (55)Button  (4)C#  (146)Chart  (125)Cloud  (15)Company  (443)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (62)Development  (613)Doc  (7)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (37)Extensions  (22)File Manager  (6)Gantt  (18)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (488)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (41)Performance  (12)PHP  (2)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (12)Road Map  (12)Scheduler  (52)Security  (3)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (31)Solution Services  (4)Spreadsheet  (11)SQL  (10)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (112)UI  (368)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (30)Visual Studio Code  (17)Web  (577)What's new  (313)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Introducing JavaScript Breadcrumb Control in Essential JS 2

Introducing JavaScript Breadcrumb Control in Essential JS 2

We are happy to introduce the new JavaScript Breadcrumb control 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
Elements of JavaScript Breadcrumb Component

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

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 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
JavaScript Breadcrumb Displaying Items with Icons

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
Custom Items and Separator Templates in JavaScript Breadcrumb

Note: Refer to the Breadcrumb template and customization sample for more details.

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 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, live demos in our sample browser, and customization features in the documentation.

Supported platforms

The following platforms support Breadcrumb.

PlatformLive demoDocumentation
AngularAngular Breadcrumb demosGetting started with Angular Breadcrumb
ReactReact Breadcrumb demosGetting started with React Breadcrumb
VueVue Breadcrumb demosGetting started with Vue Breadcrumb
JavaScriptJavaScript Breadcrumb demosGetting started with JavaScript Breadcrumb
ASP.NET MVCASP.NET MVC Breadcrumb demosGetting started with ASP.NET MVC Breadcrumb
ASP.NET CoreASP.NET Core Breadcrumb demosGetting started with ASP.NET Core Breadcrumb

Conclusion

We hope you enjoyed this quick introduction to the design and available features of Essential JS 2’s new Breadcrumb control. If you would like to give it a try, please download our latest version of 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 forumsDirect-Trac, or feedback portal. We are always happy to assist you!

Related blogs

Tags:

Share this post:

Popular Now

Be the first to get updates

Subscribe RSS feed

Be the first to get updates

Subscribe RSS feed
Scroll To Top