Version:

Install ​

npm i @vaadin-component-factory/vcf-breadcrumb

Import ​

javascript
import '@vaadin-component-factory/vcf-breadcrumb/dist/src/vcf-breadcrumbs.js';

Variants ​

Desktop ​

html
<template>
  <vcf-breadcrumbs>
    <vcf-breadcrumb href="#">Home</vcf-breadcrumb>
    <vcf-breadcrumb href="#">Directory</vcf-breadcrumb>
    <vcf-breadcrumb>Current Page</vcf-breadcrumb>
  </vcf-breadcrumbs>
</template>

Mobile ​

html
<template>
  <vcf-breadcrumbs forceMobileMode>
    <vcf-breadcrumb href="#">Home</vcf-breadcrumb>
    <vcf-breadcrumb href="#">Directory</vcf-breadcrumb>
    <vcf-breadcrumb>Current Page</vcf-breadcrumb>
  </vcf-breadcrumbs>
</template>

Overflow ​

html
<template>
  <vcf-breadcrumbs>
    <vcf-breadcrumb href="#">Home</vcf-breadcrumb>
    <vcf-breadcrumb href="#" shift>Directory</vcf-breadcrumb>
    <vcf-breadcrumb href="#" shift>Sub-Directory</vcf-breadcrumb>
    <vcf-breadcrumb>Current Page</vcf-breadcrumb>
  </vcf-breadcrumbs>
</template>