Breadcrumbs

BeskrivelseKodeUniversell utforming

Om komponenten

Breadcrumbs er default en anchor-link komponent. Ønsker du Ä bruke Vue router(router-link) eller React router(Link) kan du spesifisere dette i props navigationType med verdien router. Komponenten kan ogsÄ bare brukes med maks 4 lenker.

Avhengigheter

Ikoner:

  • chevron-thin-left
  • chevron-thin-right

Komponenter:

Varianter

 
<nav aria-label="brĂždsmulemeny" class="pkt-breadcrumbs">
  <ol class="pkt-breadcrumbs__list pkt-breadcrumbs--desktop">
    <li class="pkt-breadcrumbs__item">
      <a
        href="#1"
        class="pkt-link pkt-link--icon-right pkt-breadcrumbs__label pkt-breadcrumbs__link"
      >
        <span class="pkt-icon pkt-breadcrumbs__icon pkt-link__icon">
          <svg viewBox="0 0 32 32">
            <use href="#chevron-thin-right"></use>
          </svg>
        </span>
        <span class="pkt-breadcrumbs__text">NivÄ 1</span>
      </a>
    </li>
    <li class="pkt-breadcrumbs__item">
      <a href="#2" class="pkt-link pkt-link--icon-right pkt-breadcrumbs__label">
        <span class="pkt-icon pkt-breadcrumbs__icon pkt-link__icon">
          <svg viewBox="0 0 32 32">
            <use href="#chevron-thin-right"></use>
          </svg>
        </span>
        <span class="pkt-breadcrumbs__text">NivÄ 2</span>
      </a>
    </li>
    <li class="pkt-breadcrumbs__item">
      <a href="#3" class="pkt-link pkt-link--icon-right pkt-breadcrumbs__label">
        <span class="pkt-icon pkt-breadcrumbs__icon pkt-link__icon">
          <svg viewBox="0 0 32 32">
            <use href="#chevron-thin-right"></use>
          </svg>
        </span>
        <span class="pkt-breadcrumbs__text">NivÄ 3</span>
      </a>
    </li>
    <li aria-current="true" class="pkt-breadcrumbs__item">
      <span class="pkt-breadcrumbs__label pkt-breadcrumbs--desktop">
        <span class="pkt-breadcrumbs__text"> NivÄ 4</span>
      </span>
    </li>
  </ol>
  <a href="#3" class="pkt-link pkt-link--icon-left pkt-breadcrumbs--mobile">
    <span class="pkt-back-link__icon pkt-icon pkt-link__icon">
      <svg viewBox="0 0 32 32">
        <use href="#chevron-thin-left"></use>
      </svg>
    </span>
    <span class="pkt-back-link__text">NivÄ 3</span>
  </a>
</nav>

<pkt-breadcrumbs :breadcrumbs="breadcrumbs" />

<PktBreadcrumbs breadcrumbs={breadcrumbs} />

CSS oversikt

Block:

  • .pkt-breadcrumbs

Elements:

  • .pkt-breadcrumbs__list
  • .pkt-breadcrumbs__item
  • .pkt-breadcrumbs__label
  • .pkt-breadcrumbs__link
  • .pkt-breadcrumbs__text

Modifiers:

  • .pkt-breadcrumbs--desktop
  • .pkt-breadcrumbs--mobile

Props, slots og events

PropTypeValidationDefaultBeskrivelse
breadcrumbsarrayObligatoriskEn liste over brÞdsmule-elementer. Hvert element mÄ ha en text (tekstetikett) og en href (URL). Maks fire linker vil vises.
navigationTypestring’router’, ‘anchor''anchor''router’ for Ă„ bruke React Router Link eller Vue router router-link , ‘anchor’ for Ă„ bruke ankertag.
className (React)stringEkstra CSS-klasser som kan brukes pÄ komponenten.

rest (React)Eventuelle ekstra attributter som skal legges til pÄ ankeretiketten.
EventsTypeValidationDefaultBeskrivelse