breadcrumb

Breadcrumb with double chevron separators

Breadcrumb with double chevron separators

Загрузка превью…

src/breadcrumb/c-breadcrumb-8.vue

<!--
  Оригинал использует IconPlaceholder. Заменено инлайновым <svg>
  (путь lucide-react v0.545.0: "chevrons-right"), идентичным react.tsx.
-->
<script setup lang="ts">
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "@/components/ui/breadcrumb"
</script>

<template>
  <Breadcrumb>
    <BreadcrumbList>
      <BreadcrumbItem>
        <BreadcrumbLink href="#">Dashboard</BreadcrumbLink>
      </BreadcrumbItem>
      <BreadcrumbSeparator>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        ><path d="m6 17 5-5-5-5" /><path d="m13 17 5-5-5-5" /></svg>
      </BreadcrumbSeparator>
      <BreadcrumbItem>
        <BreadcrumbLink href="#">Resources</BreadcrumbLink>
      </BreadcrumbItem>
      <BreadcrumbSeparator>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        ><path d="m6 17 5-5-5-5" /><path d="m13 17 5-5-5-5" /></svg>
      </BreadcrumbSeparator>
      <BreadcrumbItem>
        <BreadcrumbPage>Documentation</BreadcrumbPage>
      </BreadcrumbItem>
    </BreadcrumbList>
  </Breadcrumb>
</template>

Установка

npx shadcn-vue@latest add https://revueui.rootapi.dev/r/c-breadcrumb-8.json

Зависимости реестра

Источник: порт из ReUI (Keenthemes, MIT)