Frappe UIFrappe UI

Breadcrumbs ​

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

Playground ​

count
<Breadcrumbs :items="[
    { label: 'Workspace' },
    { label: 'Projects' },
    { label: 'Frappe UI' },
  ]" />

Example ​

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

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

Prefix slot ​

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

<template>
  <Breadcrumbs
    :items="[
      { label: 'Home', icon: 'lucide-house', route: '/' },
      { 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>

Item shape ​

Each item needs a label. How the item navigates depends on the other fields:

  • route renders a <router-link>.
  • href renders an <a>.
  • Neither renders a <button>, so use onClick to navigate.

Set href and onClick together when the app navigates by itself but the crumb must still be a real link. A plain left click runs onClick only. A click with Cmd, Ctrl or Shift, and a middle click, stay with the browser and open the URL. The context menu keeps "Copy link address".

js
const items = [
  {
    label: 'Dashboards',
    href: '/app/dashboard',
    onClick: () => router.push('/dashboard'),
  },
  { label: 'Sales' },
]

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']

  /** URL used when the item is a plain link, ignored if `route` is set */
  href?: string

  /**
   * Click handler for non-router breadcrumb items. Set it together with `href`
   * to keep a real URL on the crumb and still navigate in-app: a plain left
   * click runs the handler only, a modified click opens the URL as usual.
   */
  onClick?: (event?: MouseEvent) => 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

BottomSheetButton