components/breadcrumb.js

class Breadcrumb extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        nav {
          font-size: 0.875rem;
          margin-bottom: 1rem;
        }
        ol {
          display: flex;
          flex-wrap: wrap;
          list-style: none;
          padding: 0;
          margin: 0;
        }
        li {
          display: flex;
          align-items: center;
        }
        li:not(:last-child)::after {
          content: '/';
          margin: 0 0.5rem;
          color: #6b7280;
        }
        a {
          color: var(--vlc-sky);
          text-decoration: none;
          transition: color 0.2s;
        }
        a:hover {
          color: var(--vlc-leaf);
          text-decoration: underline;
        }
        [aria-current="page"] {
          color: var(--vlc-navy);
          font-weight: 500;
        }
      </style>
      <nav aria-label="Breadcrumb">
        <ol>
          <li><a href="https://www.vlcsolutions.com">Home</a></li>
          <li><a href="https://www.vlcsolutions.com/products.html">Products</a></li>
          <li><a href="https://www.vlcsolutions.com/microsoft-dynamics-365-business-central.html">Business Central</a></li>
          <li aria-current="page">Smart Warehouse Management</li>
        </ol>
      </nav>
    `;
  }
}
customElements.define('custom-breadcrumb', Breadcrumb);