Quick example of building a single Breadcrumbs component which takes it data from the store and returns accessible, valid markup

enhance-breadcrumbs.mjs

// app/elements/enhance-breadcrumbs.mjs
export default function EnhanceBreadcrumbs ({ html, state }) {
  const { store } = state
  const { breadcrumbs } = store
  
  const items = breadcrumbs.map(b => `
  <li>
    <a href="${b.href}">
      ${b.label}
    </a>
  </li>`).join('')
  
  return html`
    <style>
      nav { /* nav styles */ }
      ol  { /* list styles */ }
      li  { /* list item styles */ }
      a   { /* link styles */ }
    </style>
    <nav>
      <ol>
        ${items}
      </ol>
    </nav>
  `
}

index.html

<enhance-breadcrumbs></enhance-breadcrumbs>
<!-- rest of the page -->

index.mjs

// app/api/index.mjs
export async function get () {
  return {
    json: {
      breadcrumbs: [
        { url: '/', label: 'Home' },
        { url: '/about', label: 'About' },
        { url: '/about/the-team',  label: 'The Team' },
      ]
    }
  }
}