The breadcrumb bar

A new addition in Ext JS version 5 is the breadcrumb bar. This bar displays hierarchical data from a TreeStore as a trail of breadcrumb buttons. In Chapter 9, The Tree Panel, we will talk about the tree store in more detail, and also check out more specific information about TreeStore.

Let's begin with creating a new HTML file and our JS code. First of all, we need to define our store that contains data for the breadcrumb bar with the following code:

Ext.define('Myapp.sample.store.mainMenu', {
  extend: 'Ext.data.TreeStore',
  root: {
    text: 'My app',
    expanded: true,
    children: [{
      text: 'Modules',
      expanded: true,
      children: [
        {leaf: true, text: 'Employees'},
        {leaf: true, text: 'Customers'},
        {leaf: true, text: 'Products'}
      ]
    },{
      text: 'Market',
      expanded: true,
      children: [
        {leaf: true, text: 'Sales'},
        {leaf: true, text: 'Budgets'},
        {leaf: true, text: 'SEO'},
        {leaf...