Version:

Install ​

shell
npm i @mate-vue/breadcrumb

Import ​

vue
<script setup>
import { MateBreadcrumbs, MateBreadcrumb } from '@mate-vue/breadcrumb';
</script>

Variants ​

Desktop ​

vue
<template>
  <MateBreadcrumbs>
    <MateBreadcrumb href="#">Home</MateBreadcrumb>
    <MateBreadcrumb href="#">Directory</MateBreadcrumb>
    <MateBreadcrumb>Current Page</MateBreadcrumb>
  </MateBreadcrumbs>
</template>

Mobile ​

vue
<template>
  <MateBreadcrumbs forceMobileMode>
    <MateBreadcrumb href="#">Home</MateBreadcrumb>
    <MateBreadcrumb href="#">Directory</MateBreadcrumb>
    <MateBreadcrumb>Current Page</MateBreadcrumb>
  </MateBreadcrumbs>
</template>

Overflow ​

vue
<template>
  <MateBreadcrumbs>
    <MateBreadcrumb href="#">Home</MateBreadcrumb>
    <MateBreadcrumb href="#" shift>Directory</MateBreadcrumb>
    <MateBreadcrumb href="#" shift>Sub-Directory</MateBreadcrumb>
    <MateBreadcrumb>Current Page</MateBreadcrumb>
  </MateBreadcrumbs>
</template>