Breadcrumb 面包屑

用于显示当前页面在网站层级结构中的位置，并通过导航链接帮助用户快速返回之前的页面。

基础用法

面包屑的基本用法，展示页面层级关系。

基础用法

Home
1. /
Components
2. /
Breadcrumb

自定义分隔符

首页
产品中心
电子产品
手机

禁用状态

Home
1. /
Disabled Link
2. /
Current Page

<template>
  <div class="breadcrumb-demo">
    <h3>基础用法</h3>
    <div class="breadcrumb-group">
      <Breadcrumb>
        <BreadcrumbList>
          <BreadcrumbItem>
            <BreadcrumbLink as-child>
              <a href="/">Home</a>
            </BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbSeparator> / </BreadcrumbSeparator>
          <BreadcrumbItem>
            <BreadcrumbLink as-child>
              <a href="/components">Components</a>
            </BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbSeparator> / </BreadcrumbSeparator>
          <BreadcrumbItem>
            <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
          </BreadcrumbItem>
        </BreadcrumbList>
      </Breadcrumb>
    </div>

    <h3>自定义分隔符</h3>
    <div class="breadcrumb-group">
      <Breadcrumb>
        <BreadcrumbList>
          <BreadcrumbItem>
            <BreadcrumbLink as-child>
              <a href="/">首页</a>
            </BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbSeparator>
            <Icon name="chevron-right" :size="16" />
          </BreadcrumbSeparator>
          <BreadcrumbItem>
            <BreadcrumbLink as-child>
              <a href="/products">产品中心</a>
            </BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbSeparator>
            <Icon name="chevron-right" :size="16" />
          </BreadcrumbSeparator>
          <BreadcrumbItem>
            <BreadcrumbLink as-child>
              <a href="/products/electronics">电子产品</a>
            </BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbSeparator>
            <Icon name="chevron-right" :size="16" />
          </BreadcrumbSeparator>
          <BreadcrumbItem>
            <BreadcrumbPage>手机</BreadcrumbPage>
          </BreadcrumbItem>
        </BreadcrumbList>
      </Breadcrumb>
    </div>

    <h3>禁用状态</h3>
    <div class="breadcrumb-group">
      <Breadcrumb>
        <BreadcrumbList>
          <BreadcrumbItem>
            <BreadcrumbLink as-child>
              <a href="/">Home</a>
            </BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbSeparator> / </BreadcrumbSeparator>
          <BreadcrumbItem>
            <BreadcrumbLink disabled> Disabled Link </BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbSeparator> / </BreadcrumbSeparator>
          <BreadcrumbItem>
            <BreadcrumbPage>Current Page</BreadcrumbPage>
          </BreadcrumbItem>
        </BreadcrumbList>
      </Breadcrumb>
    </div>
  </div>
</template>

<script setup>
import {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbSeparator,
  BreadcrumbPage,
} from '@/components/Breadcrumb';
import { Icon } from '@/components/Icon';
</script>

<style scoped>
.breadcrumb-demo {
  /* padding: 20px; */
}

h3 {
  font-size: 16px;
  font-weight: 500;
}

.breadcrumb-group {
  /* padding: 15px; */
  /* background-color: #f5f5f5; */
  border-radius: 8px;
}
</style>

与Dropdown结合使用

面包屑可以与Dropdown组件结合使用，实现复杂的导航结构。

与Dropdown结合使用

Home
1. /
2. /
3. /
Breadcrumb

多级导航示例

首页
1. /
管理后台
2. /
3. /
个人资料
4. /
编辑资料

<template>
  <div class="breadcrumb-demo">
    <h3>与Dropdown结合使用</h3>
    <div class="breadcrumb-dropdown-group">
      <Breadcrumb>
        <BreadcrumbList>
          <BreadcrumbItem>
            <BreadcrumbLink as-child>
              <a href="/">Home</a>
            </BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbSeparator> / </BreadcrumbSeparator>
          <BreadcrumbItem>
            <Dropdown>
              <DropdownMenu>
                <DropdownMenuTrigger>
                  Components
                  <Icon name="chevron-down" :size="16" />
                </DropdownMenuTrigger>
                <DropdownMenuContent align="start">
                  <DropdownMenuItem>Documentation</DropdownMenuItem>
                  <DropdownMenuItem>Themes</DropdownMenuItem>
                  <DropdownMenuItem>GitHub</DropdownMenuItem>
                </DropdownMenuContent>
              </DropdownMenu>
            </Dropdown>
          </BreadcrumbItem>
          <BreadcrumbSeparator> / </BreadcrumbSeparator>
          <BreadcrumbItem>
            <Dropdown>
              <DropdownMenu>
                <DropdownMenuTrigger>
                  Navigation
                  <Icon name="chevron-down" :size="16" />
                </DropdownMenuTrigger>
                <DropdownMenuContent align="start">
                  <DropdownMenuItem>Menu</DropdownMenuItem>
                  <DropdownMenuItem>Sidebar</DropdownMenuItem>
                  <DropdownMenuItem>Breadcrumb</DropdownMenuItem>
                  <DropdownMenuItem>Dropdown</DropdownMenuItem>
                </DropdownMenuContent>
              </DropdownMenu>
            </Dropdown>
          </BreadcrumbItem>
          <BreadcrumbSeparator> / </BreadcrumbSeparator>
          <BreadcrumbItem>
            <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
          </BreadcrumbItem>
        </BreadcrumbList>
      </Breadcrumb>
    </div>

    <h3>多级导航示例</h3>
    <div class="breadcrumb-multi-level">
      <Breadcrumb>
        <BreadcrumbList>
          <BreadcrumbItem>
            <BreadcrumbLink as-child>
              <a href="/">首页</a>
            </BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbSeparator> / </BreadcrumbSeparator>
          <BreadcrumbItem>
            <BreadcrumbLink as-child>
              <a href="/admin">管理后台</a>
            </BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbSeparator> / </BreadcrumbSeparator>
          <BreadcrumbItem>
            <Dropdown>
              <DropdownMenu>
                <DropdownMenuTrigger>
                  用户管理
                  <Icon name="chevron-down" :size="16" />
                </DropdownMenuTrigger>
                <DropdownMenuContent align="start">
                  <DropdownMenuItem>用户列表</DropdownMenuItem>
                  <DropdownMenuItem>角色管理</DropdownMenuItem>
                  <DropdownMenuItem>权限设置</DropdownMenuItem>
                </DropdownMenuContent>
              </DropdownMenu>
            </Dropdown>
          </BreadcrumbItem>
          <BreadcrumbSeparator> / </BreadcrumbSeparator>
          <BreadcrumbItem>
            <BreadcrumbLink as-child>
              <a href="/admin/users/profile">个人资料</a>
            </BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbSeparator> / </BreadcrumbSeparator>
          <BreadcrumbItem>
            <BreadcrumbPage>编辑资料</BreadcrumbPage>
          </BreadcrumbItem>
        </BreadcrumbList>
      </Breadcrumb>
    </div>
  </div>
</template>

<script setup>
import {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbSeparator,
  BreadcrumbPage,
} from '@/components/Breadcrumb';
import {
  Dropdown,
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
} from '@/components/Dropdown';
import { Icon } from '@/components/Icon';
</script>

<style scoped>
.breadcrumb-demo {
  /* padding: 20px; */
}

h3 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 500;
}

.breadcrumb-dropdown-group,
.breadcrumb-multi-level {
  /* margin-bottom: 20px; */
  /* padding: 15px; */
  /* border-radius: 8px; */
}
</style>

属性

Breadcrumb

参数	说明	类型	可选值	默认值
class	自定义类名	string	-	-

BreadcrumbList

参数	说明	类型	可选值	默认值
class	自定义类名	string	-	-

BreadcrumbItem

参数	说明	类型	可选值	默认值
class	自定义类名	string	-	-

BreadcrumbLink

参数	说明	类型	可选值	默认值
as-child	是否使用子元素作为链接	boolean	true/false	false
disabled	是否禁用	boolean	true/false	false
class	自定义类名	string	-	-

BreadcrumbSeparator

参数	说明	类型	可选值	默认值
class	自定义类名	string	-	-

BreadcrumbPage

参数	说明	类型	可选值	默认值
class	自定义类名	string	-	-

插槽

BreadcrumbSeparator

插槽名称	说明
default	自定义分隔符内容

BreadcrumbPage

插槽名称	说明
default	当前页面名称