Initial version

src/components/Breadcrumbs.ts

@@ -0,0 +1,46 @@
+import { html, css, LitElement } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+import './BreadcrumbsItem';
+
+@customElement('arx-breadcrumbs')
+export class Breadcrumbs extends LitElement {
+  @property({ type: Array }) items: { text: string; href?: string }[] = [];
+
+  static override styles = [
+    css`
+      nav {
+        max-width: 1200px;
+        margin: 1rem auto;
+        padding-inline: 1rem;
+        font-size: 0.9rem;
+      }
+
+      ol {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+      }
+    `,
+  ];
+
+  override render() {
+    return html`
+      <nav aria-label="Breadcrumb">
+        <ol>
+          ${this.items.map(
+            (item, index) => html`
+            <arx-breadcrumbs-item
+              .text=${item.text}
+              .href=${item.href}
+              .index=${index}
+            ></arx-breadcrumbs-item>
+          `,
+          )}
+        </ol>
+      </nav>
+    `;
+  }
+}