Breadcrumb 面包屑

一、概述

定义

显示当前页面在系统层级导航中的结构和层级，并能进入各个路径结构的导航。

使用场景

• 当系统拥有超过两级以上的层级结构时

• 告诉用户所处于的层级关系

• 灵活的在各个路径层级中切换

二、基础样式

清晰展示当前页面的层级的路径导航。

交互说明

1.页面处于当前导航，当前面包屑导航高亮展

2.面包屑路径，最后一个导航代表当前页面

<se-breadcrumb>
  <se-breadcrumb-item to="#">标题</se-breadcrumb-item>
  <se-breadcrumb-item to="#">二级菜单</se-breadcrumb-item>
  <se-breadcrumb-item>三级菜单</se-breadcrumb-item>
</se-breadcrumb>

使用中，你可以可以选择自定义分隔符 ——

<template>
  <se-breadcrumb>
    <template v-slot:separator>
      <span>></span>
    </template>
    <se-breadcrumb-item to="#">标题</se-breadcrumb-item>
    <se-breadcrumb-item to="#" replace>二级菜单</se-breadcrumb-item>
    <se-breadcrumb-item>三级菜单</se-breadcrumb-item>
  </se-breadcrumb>
</template>

Props

Slots