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)