Breadcrumb

Shows the current page path, allowing quick navigation back to any previous page or link.

Basic Usage

Basic breadcrumb usage. The separator property sets the separator. Everything else should be flexibly handled in slots.

首page/component/breadcrumb/

Dashboard

/component/breadcrumb/

<template>
  <div>
    <b-breadcrumb separator="/">
      <b-breadcrumb-item>首page</b-breadcrumb-item>
      <b-breadcrumb-item>component</b-breadcrumb-item>
      <b-breadcrumb-item>breadcrumb</b-breadcrumb-item>
    </b-breadcrumb>
    <b-divider />
    <b-breadcrumb separator="/">
      <b-breadcrumb-item>
        <b-dropdown>
          <a>
            Dashboard
            <b-icon name="down"></b-icon>
          </a>
          <template #dropdown>
            <b-dropdown-menu>
              <b-dropdown-item>Actions台</b-dropdown-item>
              <b-dropdown-item>分析page</b-dropdown-item>
            </b-dropdown-menu>
          </template>
        </b-dropdown>
      </b-breadcrumb-item>
      <b-breadcrumb-item>component</b-breadcrumb-item>
      <b-breadcrumb-item>breadcrumb</b-breadcrumb-item>
    </b-breadcrumb>
  </div>
</template>

Separator

You can configure the separator.

首pagecomponentbreadcrumb

首pagecomponentbreadcrumb

<template>
  <div>
    <b-breadcrumb separator-icon="right">
      <b-breadcrumb-item><a href="/">首page</a></b-breadcrumb-item>
      <b-breadcrumb-item><a href="/">component</a></b-breadcrumb-item>
      <b-breadcrumb-item>breadcrumb</b-breadcrumb-item>
    </b-breadcrumb>
    <br />
    <b-breadcrumb separator-icon="caret-right">
      <b-breadcrumb-item><a href="/">首page</a></b-breadcrumb-item>
      <b-breadcrumb-item><a href="/">component</a></b-breadcrumb-item>
      <b-breadcrumb-item>breadcrumb</b-breadcrumb-item>
    </b-breadcrumb>
  </div>
</template>

Breadcrumb Props

Parameter	Description	Type	Options	Default
separator	Separator	string	—	'/'
separator-icon	Separator icon	string	—	—