Breadcrumb

Компонент Breadcrumb предназначен для отображения навигационного пути пользователя по иерархии страниц. Он помогает понять, где в структуре приложения находится пользователь, и предоставляет быстрый доступ к родительским разделам. В Element Plus Breadcrumb реализован гибко и поддерживает кастомизацию, включая слоты, иконки и управление разделителями.

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

Базовая структура Breadcrumb состоит из контейнера <el-breadcrumb> и элементов <el-breadcrumb-item>:

<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item to="/">Главная</el-breadcrumb-item>
    <el-breadcrumb-item to="/products">Продукты</el-breadcrumb-item>
    <el-breadcrumb-item>Электроника</el-breadcrumb-item>
  </el-breadcrumb>
</template>
  • <el-breadcrumb> — контейнер, который объединяет все элементы.
  • separator — строка или символ, разделяющий элементы (по умолчанию "/").
  • <el-breadcrumb-item> — отдельный элемент пути. Если указать атрибут to, элемент становится ссылкой (поддерживается интеграция с vue-router).

Использование с vue-router

Для динамической навигации часто используют атрибут to, который работает как в <router-link>:

<el-breadcrumb separator=">">
  <el-breadcrumb-item to="/">Главная</el-breadcrumb-item>
  <el-breadcrumb-item to="/blog">Блог</el-breadcrumb-item>
  <el-breadcrumb-item :to="{ name: 'post', params: { id: 123 } }">Статья</el-breadcrumb-item>
</el-breadcrumb>
  • to="/" — прямой путь к корню.
  • :to="{ name: 'post', params: { id: 123 } }" — использование именованных маршрутов с параметрами.

Кастомизация разделителя

Разделитель можно задавать разными способами:

<el-breadcrumb separator="/">
  <el-breadcrumb-item>Главная</el-breadcrumb-item>
  <el-breadcrumb-item>Каталог</el-breadcrumb-item>
</el-breadcrumb>

<el-breadcrumb separator=">">
  <el-breadcrumb-item>Главная</el-breadcrumb-item>
  <el-breadcrumb-item>Каталог</el-breadcrumb-item>
</el-breadcrumb>

<el-breadcrumb>
  <el-breadcrumb-item>Главная</el-breadcrumb-item>
  <el-breadcrumb-item>Каталог</el-breadcrumb-item>
  <template #separator>
    <i class="el-icon-arrow-right"></i>
  </template>
</el-breadcrumb>
  • Атрибут separator позволяет задать текстовый разделитель.
  • Слот separator позволяет использовать иконки или кастомные компоненты.

Динамический Breadcrumb

Breadcrumb часто формируется динамически на основе состояния приложения или данных маршрутов:

<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item v-for="(item, index) in breadcrumbs" :key="index" :to="item.path">
      {{ item.label }}
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script>
export default {
  data() {
    return {
      breadcrumbs: [
        { label: 'Главная', path: '/' },
        { label: 'Каталог', path: '/catalog' },
        { label: 'Телевизоры', path: '/catalog/tv' },
      ],
    };
  },
};
</script>
  • Использование v-for позволяет легко генерировать элементы из массива объектов.
  • Каждый элемент может содержать как путь (path), так и отображаемое название (label).

Стилизация

Element Plus позволяет настраивать внешний вид Breadcrumb через CSS или SCSS, а также через пропсы:

<el-breadcrumb separator="/" class="custom-breadcrumb">
  <el-breadcrumb-item>Главная</el-breadcrumb-item>
  <el-breadcrumb-item>Каталог</el-breadcrumb-item>
</el-breadcrumb>

<style scoped>
.custom-breadcrumb {
  font-size: 16px;
  color: #409eff;
}

.custom-breadcrumb .el-breadcrumb__item {
  font-weight: 500;
}

.custom-breadcrumb .el-breadcrumb__separator {
  margin: 0 8px;
  color: #909399;
}
</style>
  • .el-breadcrumb__item — стиль отдельного элемента.
  • .el-breadcrumb__separator — стиль разделителя.
  • Можно изменять цвет, размер шрифта, отступы и применять любые CSS-трюки.

Использование иконок внутри элементов

Для улучшения визуального восприятия к элементам можно добавлять иконки:

<el-breadcrumb separator="/">
  <el-breadcrumb-item>
    <i class="el-icon-house"></i>
    Главная
  </el-breadcrumb-item>
  <el-breadcrumb-item>
    <i class="el-icon-menu"></i>
    Каталог
  </el-breadcrumb-item>
</el-breadcrumb>
  • Используются встроенные иконки Element Plus через класс el-icon-*.
  • Иконки можно сочетать с текстом или полностью заменить текст на графику.

Слоты для полной кастомизации

Компонент поддерживает слоты для максимальной гибкости:

<el-breadcrumb separator="/">
  <el-breadcrumb-item>
    <template #default>
      <span style="color: red">Главная</span>
    </template>
  </el-breadcrumb-item>
  <el-breadcrumb-item>
    <template #default>
      <router-link to="/catalog">Каталог</router-link>
    </template>
  </el-breadcrumb-item>
</el-breadcrumb>
  • Слот default позволяет полностью управлять содержимым элемента.
  • Можно использовать сложные компоненты, ссылки, кнопки или иконки внутри каждого элемента.

Поддержка многоуровневых навигаций

Breadcrumb хорошо работает с вложенными структурами и может комбинироваться с динамическим формированием из маршрутов Vue Router:

computed: {
  breadcrumbs() {
    const route = this.$route;
    const matched = route.matched;
    return matched.map(r => ({
      label: r.meta.title || r.name,
      path: r.path,
    }));
  },
}
  • Каждый маршрут может содержать мета-поле title, используемое для отображения.
  • Такой подход упрощает управление навигационным путём при большом количестве страниц.

Важные моменты

  • SEO и доступность: Breadcrumb помогает поисковым системам и пользователям понять структуру сайта.
  • Интеграция с Vue Router: Использование атрибута to обеспечивает плавную навигацию без перезагрузки страницы.
  • Кастомизация: Слоты и CSS позволяют полностью менять внешний вид без ограничения стандартного API.
  • Динамическое формирование: Breadcrumb легко генерировать на основе данных маршрутов, что особенно важно для больших приложений.

Эти возможности делают Breadcrumb в Element Plus мощным инструментом для навигации и структурирования интерфейсов.

Оглавление