Breadcrumb

A breadcrumb displays the current location within a hierarchy. It allows going back to states higher up in the hierarchy.

When To Use

• When the system has more than two layers in a hierarchy.
• When you need to inform the user of where they are.
• When the user may need to navigate back to a higher level.

Examples

Basic

<template>
  <a-breadcrumb>
    <a-breadcrumb-item>Home</a-breadcrumb-item>
    <a-breadcrumb-item><a href="">Application Center</a></a-breadcrumb-item>
    <a-breadcrumb-item><a href="">Application List</a></a-breadcrumb-item>
    <a-breadcrumb-item>An Application</a-breadcrumb-item>
  </a-breadcrumb>
</template>

With Icon

<template>
  <a-breadcrumb>
    <a-breadcrumb-item>
      <template #icon>
        <HomeOutlined />
      </template>
    </a-breadcrumb-item>
    <a-breadcrumb-item>
      <template #icon>
        <UserOutlined />
      </template>
      <span>Application List</span>
    </a-breadcrumb-item>
    <a-breadcrumb-item>Application</a-breadcrumb-item>
  </a-breadcrumb>
</template>

<script setup>
import { HomeOutlined, UserOutlined } from '@ant-design/icons-vue'
</script>

Configuring the Separator

<template>
  <div>
    <a-breadcrumb separator=">">
      <a-breadcrumb-item>Home</a-breadcrumb-item>
      <a-breadcrumb-item href="">Application Center</a-breadcrumb-item>
      <a-breadcrumb-item href="">Application List</a-breadcrumb-item>
      <a-breadcrumb-item>An Application</a-breadcrumb-item>
    </a-breadcrumb>
    <br />
    <a-breadcrumb>
      <template #separator>
        <span style="color: red">*</span>
      </template>
      <a-breadcrumb-item>Home</a-breadcrumb-item>
      <a-breadcrumb-item href="">Application Center</a-breadcrumb-item>
      <a-breadcrumb-item href="">Application List</a-breadcrumb-item>
      <a-breadcrumb-item>An Application</a-breadcrumb-item>
    </a-breadcrumb>
  </div>
</template>

With Dropdown menu

<template>
  <a-breadcrumb>
    <a-breadcrumb-item>Ant Design Vue</a-breadcrumb-item>
    <a-breadcrumb-item>
      <a href="">Component</a>
    </a-breadcrumb-item>
    <a-breadcrumb-item :overlay="menu">
      <a href="">General</a>
    </a-breadcrumb-item>
    <a-breadcrumb-item>Button</a-breadcrumb-item>
  </a-breadcrumb>
</template>

<script setup>
import { h } from 'vue'

const menu = h('a-menu', {}, [
  h('a-menu-item', { key: '1' }, [
    h('a', { href: '' }, 'General')
  ]),
  h('a-menu-item', { key: '2' }, [
    h('a', { href: '' }, 'Layout')
  ]),
  h('a-menu-item', { key: '3' }, [
    h('a', { href: '' }, 'Navigation')
  ])
])
</script>

API

Breadcrumb

Property	Description	Type	Default	Version
itemRender	Custom item renderer	(route, params, routes, paths) => VNode	-
params	Routing parameters	object	-
routes	The routing stack information of router	routes[]	-
separator	Custom separator	string | slot	/

Breadcrumb.Item

Property	Description	Type	Default	Version
href	Target of hyperlink	string	-
overlay	The dropdown menu	Menu | () => Menu	-

Breadcrumb.Separator

Property	Description	Type	Default	Version
-	Custom separator	-	-

When using Breadcrumb.Separator,its parent component must be set to separator="", otherwise the default separator of the parent component will appear.