Vue Breadcrumb Component

Usage

Use the Breadcrumb component to show the current page's location in your site's hierarchy.

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

const items = ref<BreadcrumbItem[]>([
  {
    label: 'Docs',
    to: '/docs'
  },
  {
    label: 'Components',
    to: '/docs/components'
  },
  {
    label: 'Breadcrumb',
    to: '/docs/components/breadcrumb'
  }
])
</script>

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

Items

Use the items prop as an array of objects with the following properties:

label?: string
icon?: IconComponent
avatar?: AvatarProps
slot?: string
class?: any
b24ui?: { item?: ClassNameValue, link?: ClassNameValue, linkLeadingIcon?: ClassNameValue, linkLeadingAvatar?: ClassNameValue, linkLabel?: ClassNameValue, separator?: ClassNameValue, separatorIcon?: ClassNameValue }

You can pass any property from the Link component such as to, target, etc.

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

const items = ref<BreadcrumbItem[]>([
  {
    label: 'Docs',
    to: '/docs'
  },
  {
    label: 'Components',
    to: '/docs/components'
  },
  {
    label: 'Breadcrumb',
    to: '/docs/components/breadcrumb'
  }
])
</script>

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

A span is rendered instead of a link when the to property is not defined.

Separator Icon

Use the separator-icon prop to customize the Icon between each item.

<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
import type { BreadcrumbItem } from '@bitrix24/b24ui-nuxt'

const items = ref<BreadcrumbItem[]>([
  {
    label: 'Docs',
    to: '/docs'
  },
  {
    label: 'Components',
    to: '/docs/components'
  },
  {
    label: 'Breadcrumb',
    to: '/docs/components/breadcrumb'
  }
])
</script>

<template>
  <B24Breadcrumb :separator-icon="RocketIcon" :items="items" />
</template>

Examples

With separator slot

Use the #separator slot to customize the separator between each item.

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

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

<template>
  <B24Breadcrumb :items="items">
    <template #separator>
      <span class="mx-2 text-(--b24ui-typography-legend-color)">/</span>
    </template>
  </B24Breadcrumb>
</template>

With custom slot

Use the slot property to customize a specific item.

You will have access to the following slots:

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

<script setup lang="ts">
import type { BreadcrumbItem } from '@bitrix24/b24ui-nuxt'
import MoreLIcon from '@bitrix24/b24icons-vue/outline/MoreLIcon'
import HomeIcon from '@bitrix24/b24icons-vue/outline/HomeIcon'
import ProductIcon from '@bitrix24/b24icons-vue/outline/ProductIcon'
import LinkIcon from '@bitrix24/b24icons-vue/outline/LinkIcon'

const items = [
  {
    label: 'Home',
    to: '/',
    icon: HomeIcon
  },
  {
    slot: 'dropdown' as const,
    icon: MoreLIcon,
    children: [
      {
        label: 'Documentation',
        to: '/docs'
      },
      {
        label: 'Themes'
      },
      {
        label: 'GitHub'
      }
    ]
  },
  {
    label: 'Components',
    to: '/docs/components',
    icon: ProductIcon
  },
  {
    label: 'Breadcrumb',
    to: '/docs/components/breadcrumb',
    icon: LinkIcon
  }
] satisfies BreadcrumbItem[]
</script>

<template>
  <B24Breadcrumb :items="items">
    <template #dropdown="{ item }">
      <B24DropdownMenu :items="item.children">
        <B24Button :icon="item.icon" color="air-tertiary-no-accent" class="p-0.5" />
      </B24DropdownMenu>
    </template>
  </B24Breadcrumb>
</template>

You can also use the #item, #item-leading, #item-label and #item-trailing slots to customize all items.

API

Props

Prop	Default	Type
`as`	`'nav'`	`any` The element or component this component should render as.
`items`		`T[]`
`separatorIcon`	`icons.chevronRight`	`IconComponent` The icon to use as a separator.
`labelKey`	`'label'`	`keyof Extract<NestedItem<T>, object> & string \| DotPathKeys<Extract<NestedItem<T>, object>>` The key used to get the label from the item.
`b24ui`		`{ root?: ClassNameValue; list?: ClassNameValue; item?: ClassNameValue; link?: ClassNameValue; linkLeadingIcon?: ClassNameValue; linkLeadingAvatar?: ClassNameValue; linkLeadingAvatarSize?: ClassNameValue; linkLabel?: ClassNameValue; separator?: ClassNameValue; separatorIcon?: ClassNameValue; }`

Slots

Slot	Type
`item`	`{ item: T; index: number; active?: boolean \| undefined; b24ui: object; }`
`item-leading`	`{ item: T; index: number; active?: boolean \| undefined; b24ui: object; }`
`item-label`	`{ item: T; index: number; active: boolean; }`
`item-trailing`	`{ item: T; index: number; active: boolean; }`
`separator`	`{ b24ui: object; }`

Theme

app.config.ts

export default defineAppConfig({
  b24ui: {
    breadcrumb: {
      slots: {
        root: 'relative min-w-0',
        list: 'flex items-center gap-[6px]',
        item: 'flex min-w-0',
        link: 'group relative flex items-center gap-[6px] text-(length:--ui-font-size-sm) min-w-0 -mt-px focus-visible:outline-(--ui-color-accent-main-primary)',
        linkLeadingIcon: 'shrink-0 size-[20px]',
        linkLeadingAvatar: 'shrink-0',
        linkLeadingAvatarSize: '2xs',
        linkLabel: 'truncate',
        separator: 'flex',
        separatorIcon: 'shrink-0 size-[20px] text-(--ui-color-base-6)'
      },
      variants: {
        active: {
          true: {
            link: 'text-(--ui-color-design-selection-content) hover:text-(--ui-color-accent-main-primary-alt-2) hover:underline font-(--ui-font-weight-semi-bold)'
          },
          false: {
            link: 'text-(--b24ui-typography-legend-color) font-(--ui-font-weight-medium)'
          }
        },
        disabled: {
          true: {
            link: 'cursor-not-allowed opacity-30'
          }
        },
        to: {
          true: ''
        }
      },
      compoundVariants: [
        {
          disabled: false,
          active: false,
          to: true,
          class: {
            link: 'hover:text-(--ui-color-accent-main-primary-alt-2) hover:underline transition-colors'
          }
        }
      ]
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import bitrix24UIPluginVite from '@bitrix24/b24ui-nuxt/vite'

export default defineConfig({
  plugins: [
    vue(),
    bitrix24UIPluginVite({
      b24ui: {
        breadcrumb: {
          slots: {
            root: 'relative min-w-0',
            list: 'flex items-center gap-[6px]',
            item: 'flex min-w-0',
            link: 'group relative flex items-center gap-[6px] text-(length:--ui-font-size-sm) min-w-0 -mt-px focus-visible:outline-(--ui-color-accent-main-primary)',
            linkLeadingIcon: 'shrink-0 size-[20px]',
            linkLeadingAvatar: 'shrink-0',
            linkLeadingAvatarSize: '2xs',
            linkLabel: 'truncate',
            separator: 'flex',
            separatorIcon: 'shrink-0 size-[20px] text-(--ui-color-base-6)'
          },
          variants: {
            active: {
              true: {
                link: 'text-(--ui-color-design-selection-content) hover:text-(--ui-color-accent-main-primary-alt-2) hover:underline font-(--ui-font-weight-semi-bold)'
              },
              false: {
                link: 'text-(--b24ui-typography-legend-color) font-(--ui-font-weight-medium)'
              }
            },
            disabled: {
              true: {
                link: 'cursor-not-allowed opacity-30'
              }
            },
            to: {
              true: ''
            }
          },
          compoundVariants: [
            {
              disabled: false,
              active: false,
              to: true,
              class: {
                link: 'hover:text-(--ui-color-accent-main-primary-alt-2) hover:underline transition-colors'
              }
            }
          ]
        }
      }
    })
  ]
})

User

A component to display user details, including their name, bio, and profile picture.

CommandPalette

A searchable command palette powered by Fuse.js for fast, fuzzy text search.