Breadcrumb

Breadcrumb component enhanced based on Element Plus Breadcrumb.

Displays the location of the current page, making it easier to browser back.

Basic usage

In In each Breadcrumb component, you need to use the bk-breadcrumb-item component to represent each level starting from the homepage. You can also configure the page level data and the current level in a configuration-driven manner via the items and current-item attributes. This component has a String attribute separator, and it determines the separator. Its default value is '/'.

homepage/promotion management/promotion list/promotion detail/

homepage/ promotion management/ promotion list/ promotion detail/

<template>
  <bk-breadcrumb separator="/">
    <bk-breadcrumb-item :to="{ path: '/' }">homepage</bk-breadcrumb-item>
    <bk-breadcrumb-item>
      <a href="/">promotion management</a>
    </bk-breadcrumb-item>
    <bk-breadcrumb-item>promotion list</bk-breadcrumb-item>
    <bk-breadcrumb-item>promotion detail</bk-breadcrumb-item>
  </bk-breadcrumb>

  <el-divider></el-divider>

  <bk-breadcrumb :items="items" :currentItem="currentItem" separator="/"></bk-breadcrumb>
</template>
<script lang="ts" setup>
import { ref, reactive } from "vue"
import type { BreadcrumbItem } from "vue-business-kit"

const items = reactive<BreadcrumbItem[]>([
  {
    id: 1,
    menuName: "homepage",
    link: "/",
    children: [
      {
        id: 2,
        menuName: "promotion management",
        link: "/promotion_management",
        children: [
          {
            id: 3,
            menuName: "promotion list",
            link: "/promotion_management/promotion_list",
            children: [
              {
                id: 4,
                menuName: "promotion detail",
                link: "/promotion_management/promotion_list/promotion_detail"
              }
            ]
          }
        ]
      }
    ]
  }
])
const currentItem = ref("/promotion_management/promotion_list/promotion_detail")
</script>

Hide Source

Icon separator

Set separator-icon to use svg icon as the separator，it will cover separator

homepage

promotion management

promotion list

promotion detail

<template>
  <bk-breadcrumb separator-icon="tabler:chevron-right">
    <bk-breadcrumb-item :to="{ path: '/' }">homepage</bk-breadcrumb-item>
    <bk-breadcrumb-item>promotion management</bk-breadcrumb-item>
    <bk-breadcrumb-item>promotion list</bk-breadcrumb-item>
    <bk-breadcrumb-item>promotion detail</bk-breadcrumb-item>
  </bk-breadcrumb>
</template>

<script lang="ts" setup></script>

Hide Source

Breadcrumb API

Breadcrumb Attributes

Name	Description	Type	Default
separator-icon extended	icon component of icon separator	string / Component	—
config	Breadcrumb configuration object	object	—
items	Breadcrumb item array	array	—
currentItem	Current item path	string	—

Element Plus Breadcrumb Attributes

Name	Description	Type	Default
separator	separator character	string	/

BreadcrumbItem

Extends all Element Plus BreadcrumbItemProps properties with additional features:

Name	Description	Type	Default
id	Unique identifier for the item	number / string	—
icon	Icon to display	string	—
menu_name	Display name for the menu item	string	—
link	URL or route path	string	—
children	Child items array	array	—

Breadcrumb Slots

Element Plus Breadcrumb Slots

Name	Description	Subtags
default	customize default content	Breadcrumb Item

BreadcrumbItem API

BreadcrumbItem Attributes

Element Plus BreadcrumbItem Attributes

Name	Description	Type	Default
to	target route of the link, same as to of vue-router	string / object	''
replace	if true, the navigation will not leave a history record	boolean	false

BreadcrumbItem Slots

Element Plus BreadcrumbItem Slots

Name	Description
default	customize default content