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:
- pkt-link
- pkt-icon
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
| Prop | Type | Validation | Default | Beskrivelse |
|---|---|---|---|---|
| breadcrumbs | array | Obligatorisk | En liste over brÞdsmule-elementer. Hvert element mÄ ha en text (tekstetikett) og en href (URL). Maks fire linker vil vises. | |
| navigationType | string | ârouterâ, âanchor' | 'anchor' | 'routerâ for Ă„ bruke React Router Link eller Vue router router-link , âanchorâ for Ă„ bruke ankertag. |
| className (React) | string | Ekstra CSS-klasser som kan brukes pÄ komponenten. | ||
| âŠrest (React) | Eventuelle ekstra attributter som skal legges til pĂ„ ankeretiketten. |
| Events | Type | Validation | Default | Beskrivelse |
|---|---|---|---|---|