Breadcrumb 面包屑

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

何时使用

  • 需要展示页面层级路径、帮助用户定位当前位置时。
  • 页面层级较深、需要提供快捷返回上级的导航时。

基础用法

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

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

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

  <!-- 自定义分隔符 -->
  <Breadcrumb :items="items" separator=">" />
</template>

导入

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

Props

属性类型默认值说明
itemsBreadcrumbItemType[][]数据项:{ title, href?, icon? },无 href 为当前页
separatorstring"/"分隔符