---
description: 介紹使用 Breadcrumb 麵包屑元件
---

# Breadcrumb

<div data-full-width="false"><figure><img src="https://3730302285-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWkKD42HpQdyU6pMEvZom%2Fuploads%2F4KmjqA7V28Eu9lppaJXR%2Fbreadcrumb.webp?alt=media&#x26;token=8e6e5921-66f3-402f-b4a1-79b7fe6f5074" alt="Breadcrumb 介紹示意圖"><figcaption></figcaption></figure></div>

Breadcrumb，也就是俗稱的「麵包屑」，就如「糖果屋」故事裡為了怕迷路而撒下的麵包屑，在網頁裡，使用者有時候會突然忘記自己在哪個層級的頁面裡，這時候 Breadcrumb 就會發揮它的作用，指出方向讓使用者知道自己的方位。

### 基本使用 <a href="#basic" id="basic"></a>

```html
<bpa-breadcrumb :key="$route.path">
  <bpa-breadcrumb-item
    v-for="(pathItem, pathIndex) in path"
    :key="`pathIndex-${pathIndex}`"
    :title="`goto${pathItem.title}`"
    :to="pathItem.url"
  >
    {{ pathItem.title }}
  </bpa-breadcrumb-item>
</bpa-breadcrumb>
```

### 屬性 <a href="#props" id="props"></a>

<table data-full-width="false"><thead><tr><th>Name</th><th>Value</th><th>Type</th><th>Default</th><th data-type="checkbox">Required</th><th>Note</th></tr></thead><tbody><tr><td>to</td><td>{ url path }</td><td>Vue Route</td><td></td><td>false</td><td></td></tr><tr><td>title</td><td></td><td>String</td><td></td><td>true</td><td>&#x3C;a title="title"></td></tr></tbody></table>

### Demo

{% embed url="https://codesandbox.io/embed/piman-breadcrumb-iiynq4?fontsize=14&module=/src/App.vue&theme=dark" fullWidth="false" %}
