# 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>
```