mirror of
https://git.hmsn.ink/kospo/svcm/oa.git
synced 2026-03-20 06:13:35 +09:00
64 lines
1.1 KiB
Markdown
64 lines
1.1 KiB
Markdown
---
|
|
breadcrumb:
|
|
- label: Vuero
|
|
hideLabel: true
|
|
icon: lucide:home
|
|
link: https://vuero.cssninja.io/
|
|
- label: Components
|
|
icon: lucide:cpu
|
|
to:
|
|
name: /components/
|
|
- label: VBreadcrumb
|
|
---
|
|
|
|
### Arrow Separator
|
|
|
|
Breadcrumb items can be separated by alternative separators.
|
|
To display arrow breadcrumb separators,
|
|
set the `separator` prop to `arrow`. See markup for more details.
|
|
|
|
<!--code-->
|
|
|
|
```vue
|
|
<script setup lang="ts">
|
|
const breadcrumb = [
|
|
{
|
|
label: 'Vuero',
|
|
hideLabel: true,
|
|
icon: 'lucide:home',
|
|
// use external links
|
|
link: 'https://vuero.cssninja.io/',
|
|
},
|
|
{
|
|
label: 'Components',
|
|
icon: 'lucide:cpu',
|
|
// or generate a router link with 'to' props
|
|
to: '/components/',
|
|
},
|
|
{
|
|
label: 'VBreadcrumb',
|
|
},
|
|
]
|
|
</script>
|
|
|
|
<template>
|
|
<VBreadcrumb :items="breadcrumb" separator="arrow" />
|
|
<VBreadcrumb
|
|
:items="breadcrumb"
|
|
separator="arrow"
|
|
with-icons
|
|
/>
|
|
</template>
|
|
```
|
|
|
|
<!--/code-->
|
|
|
|
<!--example-->
|
|
|
|
<div>
|
|
<VBreadcrumb :items="frontmatter.breadcrumb" separator="arrow" />
|
|
<VBreadcrumb :items="frontmatter.breadcrumb" separator="arrow" with-icons />
|
|
</div>
|
|
|
|
<!--/example-->
|