shadcn-vue/apps/www/src/lib/registry/default/example/BreadcrumbDropdown.vue
Saeid Zareie 4d08adc81e
feat: breadcrumb component (#405)
* feat: adding breadcrumb component, resolves #395

* fix: revert kbd component in main layout

* feat: add slot for `BreadcrumbEllipsis` icons too

build registry, bump radix-vue

* refactor: using primitive instead of computed

* chore: update

---------

Co-authored-by: Sadegh Barati <sadeghbaratiwork@gmail.com>
2024-03-13 15:33:22 +08:00

52 lines
1.3 KiB
Vue

<script lang="ts" setup>
import { ChevronDown, Slash } from 'lucide-vue-next'
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from '@/lib/registry/default/ui/breadcrumb'
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from '@/lib/registry/default/ui/dropdown-menu'
</script>
<template>
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink href="/">
Home
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator>
<Slash />
</BreadcrumbSeparator>
<BreadcrumbItem>
<DropdownMenu>
<DropdownMenuTrigger class="flex items-center gap-1">
Components
<ChevronDown class="h-4 w-4" />
</DropdownMenuTrigger>
<DropdownMenuContent align="start">
<DropdownMenuItem>Documentation</DropdownMenuItem>
<DropdownMenuItem>Themes</DropdownMenuItem>
<DropdownMenuItem>GitHub</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</BreadcrumbItem>
<BreadcrumbSeparator>
<Slash />
</BreadcrumbSeparator>
<BreadcrumbItem>
<BreadcrumbPage>Breadcrumb</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
</template>