Customizable breadcrumb home

README.md

@@ -146,12 +146,13 @@ Library using flat data structure inside, as in the example above. But you can a
 | Field                | Default                     | Description                                                 |
 |----------------------|-----------------------------|-------------------------------------------------------------|
 | placeholder          | Type a command or search... | Placeholder for search                                      |
+| breadcrumbHome       | Home                        | Text of root breadcrumb item                                |
 | disableHotkeys       | false                       | If attribute exist will register all hotkey for all actions |
 | hideBreadcrumbs      | false                       | Hide breadcrumbs on header if true                          |
 | openHotkey           | cmd+k,ctrl+k                | Open or close shortcut                                      |
 | navigationUpHotkey   | up,shift+tab                | Navigation up shortcuts                                     |
 | navigationDownHotkey | down,tab                    | Navigation down shortcuts                                   |
-| closeHotkey          | esc                         | Close shortcut                                               |
+| closeHotkey          | esc                         | Close shortcut                                              |
 | goBackHotkey         | backspace                   | Go back on one level if has parent menu                     |
 | selectHotkey         | enter                       | Select action and execute handler or open submenu           |
 | hotKeysJoinedView    | false                       | If exist/true will display hotkeys inside one element       |

src/ninja-header.ts

@@ -55,14 +55,14 @@ export class NinjaHeader extends LitElement {
     }
   `;
 
-  @property()
+  @property({type: String})
   placeholder = '';
 
   @property({type: Boolean})
   hideBreadcrumbs = false;
 
-  @property()
-  breadcrumbHome = 'Home';
+  @property({type: String})
+  breadcrumbHome = '';
 
   @property({type: Array})
   breadcrumbs: string[] = [];
@@ -84,16 +84,23 @@ export class NinjaHeader extends LitElement {
           </button>`
         );
       }
-      breadcrumbs = html`<div class="breadcrumb-list">
-        <button
-          tabindex="-1"
-          @click=${() => this.selectParent()}
-          class="breadcrumb"
-        >
-          ${this.breadcrumbHome}
-        </button>
-        ${itemTemplates}
-      </div>`;
+
+      if(this.breadcrumbHome || itemTemplates.length > 0) {
+        const breadcrumbHome = this.breadcrumbHome && html`
+          <button
+            tabindex="-1"
+            @click=${() => this.selectParent()}
+            class="breadcrumb"
+          >
+            ${this.breadcrumbHome}
+          </button>
+        `;
+
+        breadcrumbs = html`<div class="breadcrumb-list">
+          ${breadcrumbHome}
+          ${itemTemplates}
+        </div>`;
+      }
     }
 
     return html`

src/ninja-keys.ts

@@ -23,6 +23,11 @@ export class NinjaKeys extends LitElement {
    */
   @property({type: String}) placeholder = 'Type a command or search...';
 
+  /**
+   * First breadcrumb item
+   */
+    @property({type: String}) breadcrumbHome = 'Home';
+
   /**
    * If true will register all hotkey for all actions
    */
@@ -419,6 +424,7 @@ export class NinjaKeys extends LitElement {
           <ninja-header
             exportparts="ninja-input,ninja-input-wrapper"
             ${ref(this._headerRef)}
+            .breadcrumbHome=${this.breadcrumbHome}
             .placeholder=${this.placeholder}
             .hideBreadcrumbs=${this.hideBreadcrumbs}
             .breadcrumbs=${this.breadcrumbs}