feat(ui5-breadcrumbs): Initial implementation

Fixes #3166

Author: kineticjs

packages/main/bundle.common.js

@@ -33,6 +33,7 @@ import "./dist/features/ColorPaletteMoreColors.js";
 import Avatar from "./dist/Avatar.js";
 import AvatarGroup from "./dist/AvatarGroup.js";
 import Badge from "./dist/Badge.js";
+import Breadcrumbs from "./dist/Breadcrumbs.js";
 import BusyIndicator from "./dist/BusyIndicator.js";
 import Button from "./dist/Button.js";
 import Card from "./dist/Card.js";

packages/main/src/Breadcrumbs.hbs

@@ -0,0 +1,39 @@
+<nav class="ui5-breadcrumbs-root"
+    aria-label="{{_accessibleNameText}}">
+    <ol @focusin="{{_onfocusin}}" 
+        @keydown="{{_onkeydown}}"
+		@keyup="{{_onkeyup}}">
+
+        <li class="ui5-breadcrumbs-overflow-opener"
+            ?hidden="{{_isOverflowEmpty}}">
+            <ui5-link @click="{{_openRespPopover}}"
+                aria-label="{{_overflowAccessibleNameText}}"
+                aria-haspopup="{{_ariaHasPopup}}">
+                <ui5-icon name="slim-arrow-down"
+                    title="{{_overflowAccessibleNameText}}"></ui5-icon>
+            </ui5-link>
+        </li>
+
+        {{#each _visibleNonOverflowingItems}}
+            <li class="ui5-breadcrumbs-link-wrapper" @click="{{../_onLinkClick}}">
+                <ui5-link
+                    href="{{this.href}}"
+                    target="{{this.target}}"
+                    id="{{this._id}}-link"
+                    aria-label="{{this.ariaLabel}}"
+                    aria-labelledby="{{this.ariaLabelledby}}"
+                    data-ui5-stable="{{this.stableDomRef}}">
+                    {{this.innerText}}
+                </ui5-link>
+            </li>
+        {{/each}}
+
+        {{#if _endsWithCurrentLocation}}
+        <li class="ui5-breadcrumbs-current-location">
+            <ui5-label id="{{id}}-current-location"
+                aria-current="page">{{_currentLocationText}}
+            </ui5-label>
+        </li>
+        {{/if}}
+    </ol>
+</nav>