Breadcrumb

用于在网站中导航的链接层级结构。

用法

项目

使用 items 属性，它是一个包含以下属性的对象数组

label?: string
icon?: string
avatar?: AvatarProps
class?: any
slot?: string

你可以传递 Link 组件的任何属性，例如 to, target 等。

<script setup lang="ts">
import type { BreadcrumbItem } from '@nuxt/ui'

const items = ref<BreadcrumbItem[]>([
  {
    label: 'Home',
    icon: 'i-lucide-house'
  },
  {
    label: 'Components',
    icon: 'i-lucide-box',
    to: '/components'
  },
  {
    label: 'Breadcrumb',
    icon: 'i-lucide-link',
    to: '/components/breadcrumb'
  }
])
</script>

<template>
  <UBreadcrumb :items="items" />
</template>

当 to 属性未定义时，会渲染一个 span 而不是链接。

分隔符图标

使用 separator-icon 属性来自定义每个项目之间的图标。默认为 i-lucide-chevron-right。

separatorIcon

<script setup lang="ts">
import type { BreadcrumbItem } from '@nuxt/ui'

const items = ref<BreadcrumbItem[]>([
  {
    label: 'Home',
    icon: 'i-lucide-house'
  },
  {
    label: 'Components',
    icon: 'i-lucide-box',
    to: '/components'
  },
  {
    label: 'Breadcrumb',
    icon: 'i-lucide-link',
    to: '/components/breadcrumb'
  }
])
</script>

<template>
  <UBreadcrumb separator-icon="i-lucide-arrow-right" :items="items" />
</template>

你可以在 app.config.ts 中通过 ui.icons.chevronRight 键来全局自定义此图标。

你可以在 vite.config.ts 中通过 ui.icons.chevronRight 键来全局自定义此图标。

示例

使用分隔符插槽

使用 #separator 插槽来自定义每个项目之间的分隔符。

<script setup lang="ts">
import type { BreadcrumbItem } from '@nuxt/ui'

const items: BreadcrumbItem[] = [
  {
    label: 'Home',
    to: '/'
  },
  {
    label: 'Components',
    to: '/components'
  },
  {
    label: 'Breadcrumb',
    to: '/components/breadcrumb'
  }
]
</script>

<template>
  <UBreadcrumb :items="items">
    <template #separator>
      <span class="mx-2 text-muted">/</span>
    </template>
  </UBreadcrumb>
</template>

使用自定义插槽

使用 slot 属性来自定义特定项目。

你可以访问以下插槽

#{{ item.slot }}
#{{ item.slot }}-leading
#{{ item.slot }}-label
#{{ item.slot }}-trailing

<script setup lang="ts">
import type { BreadcrumbItem } from '@nuxt/ui'

const items = [
  {
    label: 'Home',
    to: '/'
  },
  {
    slot: 'dropdown' as const,
    icon: 'i-lucide-ellipsis',
    children: [
      {
        label: 'Documentation'
      },
      {
        label: 'Themes'
      },
      {
        label: 'GitHub'
      }
    ]
  },
  {
    label: 'Components',
    to: '/components'
  },
  {
    label: 'Breadcrumb',
    to: '/components/breadcrumb'
  }
] satisfies BreadcrumbItem[]
</script>

<template>
  <UBreadcrumb :items="items">
    <template #dropdown="{ item }">
      <UDropdownMenu :items="item.children">
        <UButton :icon="item.icon" color="neutral" variant="link" class="p-0.5" />
      </UDropdownMenu>
    </template>
  </UBreadcrumb>
</template>

你也可以使用 #item, #item-leading, #item-label 和 #item-trailing 插槽来自定义所有项目。

API

属性

属性	默认值	类型
`as`	`'nav'`	`any` 此组件应渲染为的元素或组件。
`items`		`BreadcrumbItem[]`
`separatorIcon`	`appConfig.ui.icons.chevronRight`	`string` 用作分隔符的图标。
`labelKey`	`'label'`	`string` 用于从项目中获取标签的键。
`ui`		`{ root?: ClassNameValue; list?: ClassNameValue; item?: ClassNameValue; link?: ClassNameValue; linkLeadingIcon?: ClassNameValue; ... 4 more ...; separatorIcon?: ClassNameValue; }`

插槽

插槽	类型
`item`	`{ item: BreadcrumbItem; index: number; active?: boolean \| undefined; }`
`item-leading`	`{ item: BreadcrumbItem; index: number; active?: boolean \| undefined; }`
`item-label`	`{ item: BreadcrumbItem; index: number; active?: boolean \| undefined; }`
`item-trailing`	`{ item: BreadcrumbItem; index: number; active?: boolean \| undefined; }`
`separator`	`any`

主题

app.config.ts

export default defineAppConfig({
  ui: {
    breadcrumb: {
      slots: {
        root: 'relative min-w-0',
        list: 'flex items-center gap-1.5',
        item: 'flex min-w-0',
        link: 'group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary',
        linkLeadingIcon: 'shrink-0 size-5',
        linkLeadingAvatar: 'shrink-0',
        linkLeadingAvatarSize: '2xs',
        linkLabel: 'truncate',
        separator: 'flex',
        separatorIcon: 'shrink-0 size-5 text-muted'
      },
      variants: {
        active: {
          true: {
            link: 'text-primary font-semibold'
          },
          false: {
            link: 'text-muted font-medium'
          }
        },
        disabled: {
          true: {
            link: 'cursor-not-allowed opacity-75'
          }
        },
        to: {
          true: ''
        }
      },
      compoundVariants: [
        {
          disabled: false,
          active: false,
          to: true,
          class: {
            link: [
              'hover:text-default',
              'transition-colors'
            ]
          }
        }
      ]
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        breadcrumb: {
          slots: {
            root: 'relative min-w-0',
            list: 'flex items-center gap-1.5',
            item: 'flex min-w-0',
            link: 'group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary',
            linkLeadingIcon: 'shrink-0 size-5',
            linkLeadingAvatar: 'shrink-0',
            linkLeadingAvatarSize: '2xs',
            linkLabel: 'truncate',
            separator: 'flex',
            separatorIcon: 'shrink-0 size-5 text-muted'
          },
          variants: {
            active: {
              true: {
                link: 'text-primary font-semibold'
              },
              false: {
                link: 'text-muted font-medium'
              }
            },
            disabled: {
              true: {
                link: 'cursor-not-allowed opacity-75'
              }
            },
            to: {
              true: ''
            }
          },
          compoundVariants: [
            {
              disabled: false,
              active: false,
              to: true,
              class: {
                link: [
                  'hover:text-default',
                  'transition-colors'
                ]
              }
            }
          ]
        }
      }
    })
  ]
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'

export default defineConfig({
  plugins: [
    vue(),
    uiPro({
      ui: {
        breadcrumb: {
          slots: {
            root: 'relative min-w-0',
            list: 'flex items-center gap-1.5',
            item: 'flex min-w-0',
            link: 'group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary',
            linkLeadingIcon: 'shrink-0 size-5',
            linkLeadingAvatar: 'shrink-0',
            linkLeadingAvatarSize: '2xs',
            linkLabel: 'truncate',
            separator: 'flex',
            separatorIcon: 'shrink-0 size-5 text-muted'
          },
          variants: {
            active: {
              true: {
                link: 'text-primary font-semibold'
              },
              false: {
                link: 'text-muted font-medium'
              }
            },
            disabled: {
              true: {
                link: 'cursor-not-allowed opacity-75'
              }
            },
            to: {
              true: ''
            }
          },
          compoundVariants: [
            {
              disabled: false,
              active: false,
              to: true,
              class: {
                link: [
                  'hover:text-default',
                  'transition-colors'
                ]
              }
            }
          ]
        }
      }
    })
  ]
})

徽章

一段简短的文本，表示状态或类别。

按钮

一个按钮元素，可以用作链接或触发操作。