---
URL: "/zh/components/breadcrumb.html"
LLMS_URL: "/zh/components/breadcrumb.md"
---

# Breadcrumb 面包屑

显示当前页面的路径，快速返回之前的任意页面。

## 组件注册

```js
import { FBreadcrumb, FBreadcrumbItem } from '@fesjs/fes-design';

app.use(FBreadcrumb);
app.use(FBreadcrumbItem);
```

## 代码演示

### 基础用法

```vue
<template>
    <FForm :labelWidth="60">
        <FFormItem label="分隔符:">
            <FInput v-model="separator" class="form-item" />
        </FFormItem>
        <FFormItem label="字体大小:">
            <FInputNumber v-model="fontSize" class="form-item" />
        </FFormItem>
    </FForm>
    <FDivider />
    <FBreadcrumb :separator="separator" :fontSize="fontSize">
        <FBreadcrumbItem>首页</FBreadcrumbItem>
        <FBreadcrumbItem>二级页面 </FBreadcrumbItem>
        <FBreadcrumbItem>三级页面</FBreadcrumbItem>
        <FBreadcrumbItem>四级页面</FBreadcrumbItem>
        <FBreadcrumbItem>五级页面</FBreadcrumbItem>
    </FBreadcrumb>
    <FBreadcrumb :separator="separator" :fontSize="fontSize">
        <FBreadcrumbItem v-for="(item, index) in list" :key="index">{{ item.text }}</FBreadcrumbItem>
    </FBreadcrumb>
</template>

<script setup>
import { ref } from 'vue';

const separator = ref('/');

const fontSize = ref(14);

const list = [
    {
        text: '首页',
    }, {
        text: '二级页面',
    }, {
        text: '三级页面',
    },
];
</script>

<style>
.form-item {
    width: 100px;
}
</style>
```

### 自定义点击事件
自定义某个item的点击事件。
同时点击行为，也可以和 vue-router 一起结合使用。

```vue
<template>
    <FBreadcrumb>
        <FBreadcrumbItem @click="handleClick">首页</FBreadcrumbItem>
        <FBreadcrumbItem>
            <router-link :to="{ path: 'apple', query: { color: 'red' } }">
                二级页面
            </router-link>
        </FBreadcrumbItem>
        <FBreadcrumbItem>三级页面</FBreadcrumbItem>
    </FBreadcrumb>
</template>

<script setup>
const handleClick = () => {
    window.location.href = '/';
};
</script>
```

## Breadcrumb Props

| 属性      | 说明              | 类型     | 默认值 |
| --------- | ----------------- | -------- | ------ |
| separator | 分隔符，默认为`/` | `string` | `-`    |
| fontSize  | 字体大小          | `number` | `14`   |

## Breadcrumb Slots

| 名称    | 说明                |
| ------- | ------------------- |
| default | BreadcrumbItem 组件 |

## BreadcrumbItem Slots

| 名称    | 说明           |
| ------- | -------------- |
| default | 用户自定义内容 |



<script setup>
import Base from '../../.vitepress/.temp/components/breadcrumb/base.vue'
import Click from '../../.vitepress/.temp/components/breadcrumb/click.vue'
</script>


