Breadcrumb 面包屑

显示当前页面在系统层级结构中的位置，并能向上返回。

显示当前页面在系统层级结构中的位置，并能向上返回。

何时使用

  • 当系统拥有超过两级以上的层级结构时；
  • 当需要告知用户『你在哪里』时；
  • 当需要向上导航的功能时。

导入

import { Breadcrumb } from "@reglow/reui";
import type { BreadcrumbItemType } from "@reglow/reui";

代码演示

基础用法

最简单的用法。

<script setup>
import { Breadcrumb } from "@reglow/reui";

const items = [
  { title: "首页" },
  { title: "应用中心", href: "/apps" },
  { title: "应用列表", href: "/apps/list" },
  { title: "应用详情" },
];
</script>

<template>
  <Breadcrumb :items="items" />
</template>

带有图标的

通过 icon 属性在文字前添加图标。

<script setup>
import { Breadcrumb } from "@reglow/reui";
import { Home, User } from "lucide-vue-next";
import { h } from "vue";

const items = [
  { title: "首页", href: "/", icon: h(Home) },
  { title: "应用列表", href: "/apps", icon: h(User) },
  { title: "应用" },
];
</script>

<template>
  <Breadcrumb :items="items" />
</template>

分隔符

使用 separator=">" 自定义分隔符。

<script setup>
import { Breadcrumb } from "@reglow/reui";
</script>

<template>
  <Breadcrumb
    separator=">"
    :items="[
      { title: '首页' },
      { title: '应用中心', href: '/apps' },
      { title: '应用列表', href: '/apps/list' },
      { title: '应用' },
    ]"
  />
</template>

带下拉菜单的面包屑

通过 menu 属性配置下拉菜单。

<script setup>
import { ref } from "vue";
import { Breadcrumb } from "@reglow/reui";

const selected = ref("Button");

const items = [
  { title: "Ant Design" },
  { title: "组件", href: "/components" },
  {
    title: "通用",
    menu: {
      items: [
        { label: "Button", onClick: () => (selected.value = "Button") },
        { label: "Icon", onClick: () => (selected.value = "Icon") },
        { label: "Typography", onClick: () => (selected.value = "Typography") },
      ],
    },
  },
  { title: "当前页面" },
];
</script>

<template>
  <Breadcrumb :items="items" />
  <p class="mt-3 text-sm text-muted-foreground">
    在下拉菜单中选中：<span class="font-medium text-foreground">{{ selected }}</span>
  </p>
</template>

独立的分隔符

自定义单独的分隔符。

<script setup>
import { Breadcrumb } from "@reglow/reui";

const items = [
  { title: "位置" },
  { type: "separator", separator: ":" },
  { title: "应用中心", href: "/apps" },
  { type: "separator" },
  { title: "应用列表", href: "/apps/list" },
  { type: "separator" },
  { title: "应用" },
];
</script>

<template>
  <Breadcrumb separator="" :items="items" />
</template>

自定义渲染

通过 #item slot 自定义单项渲染。

<script setup>
import { Breadcrumb } from "@reglow/reui";

const items = [
  { title: "首页", href: "/" },
  { title: "应用中心", href: "/apps" },
  { title: "应用详情" },
];
</script>

<template>
  <Breadcrumb :items="items">
    <template #item="{ item }">
      <span v-if="item.href" class="font-medium text-blue-500">{{ item.title }}</span>
      <span v-else class="text-gray-500">{{ item.title }}</span>
    </template>
  </Breadcrumb>
</template>

自定义分隔符 slot

<script setup>
import { Breadcrumb } from "@reglow/reui";
import { ArrowRight } from "lucide-vue-next";

const items = [
  { title: "首页", href: "/" },
  { title: "应用中心", href: "/apps" },
  { title: "应用" },
];
</script>

<template>
  <Breadcrumb :items="items">
    <template #separator>
      <ArrowRight class="size-3" />
    </template>
  </Breadcrumb>
</template>

点击事件

<script setup>
import { ref } from "vue";
import { Breadcrumb } from "@reglow/reui";

const message = ref("点击上方链接查看效果");

const items = [
  {
    title: "首页",
    href: "#",
    onClick: (e) => {
      e.preventDefault();
      message.value = "你点击了：首页";
    },
  },
  {
    title: "应用中心",
    href: "#",
    onClick: (e) => {
      e.preventDefault();
      message.value = "你点击了：应用中心";
    },
  },
  { title: "当前页面" },
];
</script>

<template>
  <Breadcrumb :items="items" />
  <p class="mt-3 text-sm text-muted-foreground">{{ message }}</p>
</template>

API

Breadcrumb

参数说明类型默认值
items路由栈信息BreadcrumbItemType[]-
separator分隔符自定义string | VNode/
dropdownIcon自定义下拉图标VNodeChevronDown
class附加类名string-

Slots

名称说明参数
default默认插槽（无 items 时使用子组件模式）-
separator自定义分隔符-
item自定义单项渲染{ item, index }

BreadcrumbMenuItem

参数说明类型默认值
title名称string | VNode-
href链接地址string-
path路由路径string-
icon前缀图标VNode-
onClick单击事件(e: MouseEvent) => void-
menu下拉菜单配置{ items: { label, href?, onClick? }[] }-

BreadcrumbSeparatorItem

参数说明类型默认值
type标记为分隔符"separator"-
separator要显示的分隔符string | VNode/
Affix 固钉
将页面元素钉在可视范围内
DropdownMenu 下拉菜单
基于 reka-ui 的组合式下拉菜单，支持普通项、复选项、单选组、子菜单等。