v2.7.1

Breadcrumb

A breadcrumb navigation component.
GitHub
Demo
Nuxt UI

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>

<script setup lang="ts">
import { ref } from 'vue'
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>

<script setup lang="ts">
import { ref } from 'vue'
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>

<script setup lang="ts">
import { ref } from 'vue'
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>

Color Soon

Use the color prop to change the color of the active Breadcrumb.

<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 color="air-primary-alert" :items="items" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
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 color="air-primary-alert" :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-legend">/</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[]
separatorIconicons.chevronRightIconComponent

The icon to use as a separator.

color'air-selection'"air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-warning" | "air-primary-copilot" | "air-secondary" | "air-secondary-alert" | "air-secondary-accent" | "air-secondary-accent-1" | "air-secondary-accent-2" | "air-secondary-no-accent" | "air-tertiary" | "air-tertiary-accent" | "air-tertiary-no-accent" | "air-selection" | "air-primary-no-accent"
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

https://github.com/bitrix24/b24ui/tree/main/src/theme/breadcrumb.ts
export default {
  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-(--b24ui-border-color)',
    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-(--b24ui-color) hover:underline font-(--ui-font-weight-semi-bold)'
      },
      false: {
        link: 'text-legend font-(--ui-font-weight-medium)'
      }
    },
    disabled: {
      true: {
        link: 'cursor-not-allowed opacity-30'
      }
    },
    to: {
      true: ''
    },
    color: {
      'air-primary': {
        root: 'style-filled'
      },
      'air-primary-success': {
        root: 'style-filled-success'
      },
      'air-primary-alert': {
        root: 'style-filled-alert'
      },
      'air-primary-copilot': {
        root: 'style-filled-copilot'
      },
      'air-primary-warning': {
        root: 'style-filled-warning'
      },
      'air-primary-no-accent': {
        root: 'style-filled-no-accent'
      },
      'air-secondary': {
        root: 'style-tinted'
      },
      'air-secondary-alert': {
        root: 'style-tinted-alert'
      },
      'air-secondary-accent': {
        root: 'style-outline'
      },
      'air-secondary-accent-1': {
        root: 'style-outline-accent-1'
      },
      'air-secondary-accent-2': {
        root: 'style-outline-accent-2'
      },
      'air-secondary-no-accent': {
        root: 'style-outline-no-accent'
      },
      'air-tertiary': {
        root: 'style-plain'
      },
      'air-tertiary-accent': {
        root: 'style-plain-accent'
      },
      'air-tertiary-no-accent': {
        root: 'style-plain-no-accent'
      },
      'air-selection': {
        root: 'style-selection'
      }
    }
  },
  compoundVariants: [
    {
      disabled: false,
      active: false,
      to: true,
      class: {
        link: 'hover:underline'
      }
    }
  ],
  defaultVariants: {
    color: 'air-selection'
  }
}
Some colors in compoundVariants are omitted for readability. Check out the source code on GitHub.

User

CommandPalette