vue3-uikit

1
<template>
2
  <div>
3
    <!-- Стандартные хлебные крошки -->
4
    <div class="breadcrumb-wrapper">
5
      <h3>Standard Breadcrumb</h3>
6
      <nav class="breadcrumb">
7
        <ul>
8
          <li v-for="(item, index) in breadcrumbs" :key="index" :class="{ 'is-active': index === breadcrumbs.length - 1 }">
9
            <a :href="item.link">{{ item.label }}</a>
10
          </li>
11
        </ul>
12
      </nav>
13
    </div>
14

15
    <!-- Разделенные хлебные крошки -->
16
    <div class="breadcrumb-wrapper">
17
      <h3>Separated Breadcrumb</h3>
18
      <nav class="breadcrumb breadcrumb-separated">
19
        <ul>
20
          <li v-for="(item, index) in breadcrumbs" :key="index" :class="{ 'is-active': index === breadcrumbs.length - 1 }">
21
            <a :href="item.link">{{ item.label }}</a>
22
          </li>
23
        </ul>
24
      </nav>
25
    </div>
26

27
    <!-- Хлебные крошки с иконками -->
28
    <div class="breadcrumb-wrapper">
29
      <h3>Icon Breadcrumb</h3>
30
      <nav class="breadcrumb breadcrumb-icons">
31
        <ul>
32
          <li v-for="(item, index) in breadcrumbs" :key="index" :class="{ 'is-active': index === breadcrumbs.length - 1 }">
33
            <a :href="item.link">
34
              <font-awesome-icon :icon="item.icon" />
35
              {{ item.label }}
36
            </a>
37
          </li>
38
        </ul>
39
      </nav>
40
    </div>
41
  </div>
42
</template>
43

44
<script>
45
export default {
46
  name: "Breadcrumb",
47
  setup() {
48
    const breadcrumbs = [
49
      { label: "Home", link: "/", icon: "fas fa-home" },
50
      { label: "Products", link: "/products", icon: "fas fa-box-open" },
51
      { label: "Electronics", link: "/products/electronics", icon: "fas fa-tv" },
52
      { label: "Laptops", link: "/products/electronics/laptops", icon: "fas fa-laptop" },
53
    ];
54

55
    return {
56
      breadcrumbs,
57
    };
58
  },
59
};
60
</script>
61

62
<style scoped>
63
/* Общие стили для хлебных крошек */
64
.breadcrumb-wrapper {
65
  margin-bottom: 30px;
66
}
67

68
.breadcrumb {
69
  display: flex;
70
  align-items: center;
71
  font-size: 14px;
72
}
73

74
.breadcrumb ul {
75
  list-style: none;
76
  padding: 0;
77
  margin: 0;
78
  display: flex;
79
}
80

81
.breadcrumb li {
82
  margin-right: 10px;
83
}
84

85
.breadcrumb a {
86
  text-decoration: none;
87
  color: #6200ea;
88
  transition: color 0.3s;
89
}
90

91
.breadcrumb a:hover {
92
  color: #3700b3;
93
}
94

95
.breadcrumb .is-active a {
96
  color: #333;
97
  font-weight: bold;
98
  pointer-events: none;
99
}
100

101
/* Разделенные хлебные крошки */
102
.breadcrumb-separated li::after {
103
  content: "/";
104
  margin-left: 10px;
105
  color: #999;
106
}
107

108
.breadcrumb-separated li:last-child::after {
109
  content: "";
110
}
111

112
/* Хлебные крошки с иконками */
113
.breadcrumb-icons a {
114
  display: flex;
115
  align-items: center;
116
  gap: 10px;
117
}
118

119
.breadcrumb-icons i {
120
  margin-right: 5px;
121
  font-size: 16px;
122
  color: #6200ea;
123
  transition: color 0.3s;
124
}
125

126
.breadcrumb-icons i:hover {
127
  color: #3700b3;
128
}
129
</style>
130