Breadcrumbs ​

A navigation aid that shows the user’s current location within a hierarchy and allows quick navigation to parent pages.

Example ​

vue
<script setup lang="ts">
import { Breadcrumbs } from 'frappe-ui'
</script>

<template>
  <Breadcrumbs
    :items="[
      { label: 'Home', route: { name: 'Home' } },
      { label: 'Views', route: '/components' },
      { label: 'List', route: '/components/breadcrumbs' },
    ]"
  />
</template>

Prefix slot ​

vue
<script setup lang="ts">
import { Breadcrumbs } from 'frappe-ui'
</script>

<template>
  <Breadcrumbs
    :items="[
      { label: 'Home', icon: 'lucide-house', route: { name: 'Home' } },
      { label: 'Views', icon: 'lucide-user-star', route: '/components' },
      {
        label: 'List',
        icon: 'lucide-list',
        route: '/components/breadcrumbs',
      },
    ]"
  >
    <template #prefix="{ item }">
      <span class="size-4 mx-2" :class="item.icon" />
    </template>
  </Breadcrumbs>
</template>

API Reference ​

Show types
typescript
import { RouterLinkProps } from 'vue-router'

export interface BreadcrumbItem {
  /** Text shown for the breadcrumb item */
  label: string

  /** Route location used when the item is a link */
  route?: RouterLinkProps['to']

  /** Click handler for non-router breadcrumb items */
  onClick?: () => void

  /** Allows passing additional custom fields */
  [key: string]: any
}

export interface BreadcrumbsProps {
  /** Ordered list of breadcrumb items */
  items: BreadcrumbItem[]
}
items*
BreadcrumbItem[]

Ordered list of breadcrumb items

prefix
{ item: BreadcrumbItem; }

Content shown before each breadcrumb label

suffix
{ item: BreadcrumbItem; }

Content shown after each breadcrumb label

BadgeButton