oa/documentation/breadcrumb/breadcrumb-arrow-documentation.md

breadcrumb

breadcrumb
label hideLabel icon link Vuero true lucide:home https://vuero.cssninja.io/ label icon to Components lucide:cpu 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.

<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>