Breadcrumb

Компонент Breadcrumb предназначен для отображения навигационной цепочки, позволяя пользователю понимать текущее местоположение в иерархии приложения. В Naive UI Breadcrumb реализован как гибкий и настраиваемый элемент, который легко интегрируется в интерфейсы любых приложений на Vue 3 и JavaScript.

Основная структура

Компонент импортируется из библиотеки следующим образом:

import { NBreadcrumb, NBreadcrumbItem } from 'naive-ui'

NBreadcrumb является контейнером, который содержит последовательность элементов NBreadcrumbItem. Каждый элемент представляет собой шаг или уровень навигации.

Пример базового использования:

<template>
  <n-breadcrumb>
    <n-breadcrumb-item>Главная</n-breadcrumb-item>
    <n-breadcrumb-item>Категории</n-breadcrumb-item>
    <n-breadcrumb-item>Электроника</n-breadcrumb-item>
  </n-breadcrumb>
</template>

В этом примере создается трехуровневая навигационная цепочка. Элементы разделяются автоматически стрелкой (>), хотя символ можно кастомизировать.

Настройка разделителя

По умолчанию разделителем выступает символ «/», но можно использовать любой текст или компонент:

<n-breadcrumb separator=">">
  <n-breadcrumb-item>Главная</n-breadcrumb-item>
  <n-breadcrumb-item>Блог</n-breadcrumb-item>
  <n-breadcrumb-item>Vue 3</n-breadcrumb-item>
</n-breadcrumb>

Также возможно использование пользовательского слота separator для более сложных визуальных решений:

<n-breadcrumb>
  <template #separator>
    <span style="color: gray;">→</span>
  </template>
  <n-breadcrumb-item>Главная</n-breadcrumb-item>
  <n-breadcrumb-item>Документы</n-breadcrumb-item>
</n-breadcrumb>

Навигация и ссылки

Элементы NBreadcrumbItem могут быть кликабельными, что позволяет реализовать навигацию по страницам:

<n-breadcrumb>
  <n-breadcrumb-item to="/">Главная</n-breadcrumb-item>
  <n-breadcrumb-item to="/docs">Документы</n-breadcrumb-item>
  <n-breadcrumb-item>Текущая страница</n-breadcrumb-item>
</n-breadcrumb>

Атрибут to поддерживает как строку пути, так и объект маршрута для работы с Vue Router:

<n-breadcrumb-item :to="{ name: 'home' }">Главная</n-breadcrumb-item>

Если элемент не должен быть ссылкой, to можно опустить, и он будет отображаться как обычный текст.

Динамическое создание

Breadcrumb часто строится динамически на основе данных. Это удобно для больших проектов с вложенной структурой:

<template>
  <n-breadcrumb>
    <n-breadcrumb-item
      v-for="(item, index) in breadcrumbData"
      :key="index"
      :to="item.link"
    >
      {{ item.label }}
    </n-breadcrumb-item>
  </n-breadcrumb>
</template>

<script>
export default {
  data() {
    return {
      breadcrumbData: [
        { label: 'Главная', link: '/' },
        { label: 'Категории', link: '/categories' },
        { label: 'Компьютеры', link: '/categories/computers' },
      ]
    }
  }
}
</script>

Такой подход позволяет централизованно управлять навигацией, изменяя структуру данных без редактирования шаблона.

Кастомизация внешнего вида

Naive UI предоставляет множество возможностей для визуальной настройки Breadcrumb:

  • size — размер компонентов (small, medium, large):
<n-breadcrumb size="small">
  <n-breadcrumb-item>Главная</n-breadcrumb-item>
  <n-breadcrumb-item>Новости</n-breadcrumb-item>
</n-breadcrumb>
  • separator-style — кастомизация стиля разделителя через CSS или inline-стили.
  • item-style — стиль для каждого элемента:
<n-breadcrumb :separator-style="{ color: 'gray', margin: '0 8px' }">
  <n-breadcrumb-item :style="{ fontWeight: 'bold' }">Главная</n-breadcrumb-item>
  <n-breadcrumb-item>Статьи</n-breadcrumb-item>
</n-breadcrumb>

Слоты и расширяемость

Breadcrumb поддерживает слоты для полной кастомизации:

  • default — для элементов NBreadcrumbItem
  • separator — для индивидуального разделителя между элементами
  • icon — для добавления иконок рядом с элементом

Пример с иконкой:

<n-breadcrumb>
  <n-breadcrumb-item>
    <template #icon>
      <n-icon><HomeOutlined /></n-icon>
    </template>
    Главная
  </n-breadcrumb-item>
  <n-breadcrumb-item>Каталог</n-breadcrumb-item>
</n-breadcrumb>

Использование слотов позволяет интегрировать любые кастомные компоненты, сохраняя единый стиль приложения.

Поддержка адаптивного интерфейса

Для мобильных и маленьких экранов часто используется сокращенный вариант Breadcrumb. В Naive UI можно управлять видимостью элементов с помощью условного рендеринга:

<n-breadcrumb>
  <n-breadcrumb-item>Главная</n-breadcrumb-item>
  <n-breadcrumb-item v-if="showCategory">Категории</n-breadcrumb-item>
  <n-breadcrumb-item>Текущая страница</n-breadcrumb-item>
</n-breadcrumb>

В сочетании с медиазапросами это позволяет создавать компактные и удобные навигационные цепочки.

Итоговая структура

  • NBreadcrumb — контейнер для цепочки.
  • NBreadcrumbItem — отдельный элемент навигации.
  • separator — разделитель между элементами.
  • to — ссылка для перехода.
  • slots — для кастомизации и иконок.
  • size и стили — для визуальной настройки.

Использование этих инструментов позволяет создавать гибкие, динамичные и визуально привлекательные Breadcrumb-навигации, соответствующие современным стандартам интерфейсов на Vue 3 с Naive UI.

Оглавление