Breadcrumb

Навигационный компонент, показывающий положение текущей страницы в иерархии сайта. Поддерживает сворачивание, выпадающие списки, иконки, размеры, состояние загрузки, обрезку, кастомные разделители, slot и полную настройку классов.

Basic

1. Home
2. /Products
3. /Electronics
4. /Headphones

<script setup>
import { VxBreadcrumb } from 'veloxui'

const items = [
  { label: 'Home', href: '/' },
  { label: 'Products', href: '/products' },
  { label: 'Electronics', href: '/products/electronics' },
  { label: 'Headphones' },
]
</script>

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

Sizes

Три размера: small, default и large.

small

1. Home
2. Products
3. Electronics
4. Headphones

default

1. Home
2. Products
3. Electronics
4. Headphones

large

1. Home
2. Products
3. Electronics
4. Headphones

<VxBreadcrumb :items="items" size="small" />
<VxBreadcrumb :items="items" size="default" />
<VxBreadcrumb :items="items" size="large" />

Separators

Выбирайте из встроенных разделителей или передавайте свою строку.

slash

1. Home
2. /Products
3. /Electronics
4. /Headphones

arrow

1. Home
2. Products
3. Electronics
4. Headphones

dot

1. Home
2. ·Products
3. ·Electronics
4. ·Headphones

dash

1. Home
2. –Products
3. –Electronics
4. –Headphones

<VxBreadcrumb :items="items" separator="slash" />
<VxBreadcrumb :items="items" separator="arrow" />
<VxBreadcrumb :items="items" separator="dot" />
<VxBreadcrumb :items="items" separator="dash" />

Custom Separator

Передайте любую строку в качестве разделителя или используйте slot #separator.

1. Home
2. |Products
3. |Electronics
4. |Headphones

1. Home
2. →Products
3. →Electronics
4. →Headphones

1. Home
2. Products
3. Electronics
4. Headphones

<VxBreadcrumb :items="items" separator="|" />
<VxBreadcrumb :items="items" separator="→" />

<VxBreadcrumb :items="items">
  <template #separator>
    <MyIcon />
  </template>
</VxBreadcrumb>

Icons

Задайте icon у элементов, чтобы показать встроенные иконки: home, folder, file, settings. Или используйте slot #icon для своих иконок.

1. Home
2. Documents
3. Report.pdf

<VxBreadcrumb :items="[
  { label: 'Home', href: '/', icon: 'home' },
  { label: 'Documents', href: '/docs', icon: 'folder' },
  { label: 'Report.pdf', icon: 'file' },
]" separator="arrow" />

Collapsed (Expand)

Используйте max-items, чтобы сворачивать длинные хлебные крошки. Нажмите на многоточие, чтобы развернуть.

1. Home
3. Navigation
4. Breadcrumb

<VxBreadcrumb :items="items" :max-items="3" />

Collapsed (Dropdown)

Установите collapse-mode="dropdown", чтобы показывать скрытые элементы в выпадающем поповере.

1. Home
3. Components
4. Breadcrumb

<VxBreadcrumb
  :items="items"
  :max-items="3"
  collapse-mode="dropdown"
/>

Truncation

Используйте max-width, чтобы обрезать длинные подписи многоточием. Наведите курсор, чтобы увидеть полный текст.

1. Home
2. This is a very long category name
3. Another extremely long breadcrumb item name
4. Final destination page with a long title

<VxBreadcrumb :items="items" :max-width="120" />

Loading

Показывайте скелетон-плейсхолдер во время загрузки данных.

<VxBreadcrumb :items="items" loading />

Disabled Items

Отдельные элементы можно отключить.

1. Home
2. Archived
3. Old Page

<VxBreadcrumb :items="[
  { label: 'Home', href: '/' },
  { label: 'Archived', href: '/archived', disabled: true },
  { label: 'Old Page' },
]" />

Custom Item Slot

Используйте slot #item для кастомного рендеринга. Получает item, index и active.

1. Home
2. Documents
3. Report.pdf

<VxBreadcrumb :items="items">
  <template #item="{ item, active }">
    <MyIcon :name="item.icon" />
    {{ item.label }}
  </template>
</VxBreadcrumb>

Exposed Methods

Доступ к expand(), collapse() и isCollapsed через template ref.

<script setup>
import { ref } from 'vue'
const breadcrumbRef = ref()

function toggleCollapse() {
  if (breadcrumbRef.value.isCollapsed) {
    breadcrumbRef.value.expand()
  } else {
    breadcrumbRef.value.collapse()
  }
}
</script>

<template>
  <VxBreadcrumb ref="breadcrumbRef" :items="items" :max-items="3" />
  <button @click="toggleCollapse">Toggle</button>
</template>

Custom Classes

Переопределяйте стили через root-class, item-class, active-class и separator-class.

<VxBreadcrumb
  :items="items"
  root-class="my-breadcrumb"
  item-class="my-item"
  active-class="my-active"
  separator-class="my-sep"
/>

API

VxBreadcrumb Props

Prop	Type	Default	Description
items	BreadcrumbItem[]	[]	Элементы хлебных крошек
separator	'slash' | 'arrow' | 'dot' | 'dash' | string	'slash'	Разделитель между элементами
size	'small' | 'default' | 'large'	'default'	Вариант размера
max-items	number	0	Максимум видимых элементов (0 = все). Сворачивает средние элементы.
collapse-mode	'expand' | 'dropdown'	'expand'	Способ раскрытия свёрнутых элементов
max-width	number	0	Максимальная ширина подписи в px. Обрезает многоточием.
loading	boolean	false	Показывать скелетон загрузки
root-class	string | string[] | object	—	Класс на корневом <nav>
item-class	string | string[] | object	—	Класс на каждой ссылке
active-class	string | string[] | object	—	Класс на текущем (последнем) элементе
separator-class	string | string[] | object	—	Класс на элементах-разделителях

BreadcrumbItem

Property	Type	Required	Description
label	string	Да	Отображаемый текст
href	string	Нет	URL ссылки
to	string | object	Нет	Назначение Vue Router (рендерит <router-link>)
icon	string	Нет	Встроенная иконка: home, folder, file, settings
disabled	boolean	Нет	Отключить этот элемент

Events

Event	Payload	Description
click	(item, index, event)	Клик по элементу
expand	—	Свёрнутые элементы развёрнуты
collapse	—	Элементы снова свёрнуты

Slots

Slot	Props	Description
item	{ item, index, active }	Кастомное содержимое элемента
icon	{ item }	Кастомная иконка для каждого элемента
separator	—	Кастомное содержимое разделителя
ellipsis	{ expand, toggleDropdown, collapsedItems }	Кастомная кнопка многоточия

Exposed

Name	Type	Description
expand()	() => void	Развернуть свёрнутые элементы
collapse()	() => void	Снова свернуть элементы
isCollapsed	boolean	Текущее состояние свёрнутости