Breadcrumbs

Implementasjon i kode

Breadcrumbs er tilgjengelig som både React-komponent og web component (Elements). Komponenten bør bare brukes med maks 4 lenker.

React: custom lenkekomponent

I React kan du injisere din egen lenkekomponent med renderLink-proppen. Dette er nyttig for routing-løsninger som Next.js Link, Tanstack Router Link, eller lignende.

<PktBreadcrumbs
  breadcrumbs={crumbs}
  renderLink={({ href, className, children }) => (
    <CustomLink to={href} className={className}>
      {children}
    </CustomLink>
  )}
/>

Elements: navigate-event for SPA-ruting

I Elements/HTML brukes navigate-eventet for å fange opp klikk på brødsmuler. Kall preventDefault() for å hindre vanlig navigasjon og håndter rutingen selv.

<pkt-breadcrumbs id="crumbs"></pkt-breadcrumbs>
<script>
  const el = document.querySelector('#crumbs')
  el.breadcrumbs = [
    { text: 'Hjem', href: '/' },
    { text: 'Tjenester', href: '/tjenester' },
    { text: 'Denne siden', href: '/tjenester/denne' },
  ]
  el.addEventListener('navigate', (e) => {
    e.preventDefault()
    minRouter.push(e.detail.item.href)
  })
</script>

Uten en navigate-lytter fungerer lenkene som vanlige <a>-elementer med full sidenavigasjon.

await window.customElements.whenDefined("pkt-breadcrumbs");