Breadcrumb

Links showing the position of the current page within the navigational hierarchy.

Text

Use the text attribute on the breadcrumb-item to set its text.

<script setup lang="ts">
import { VBreadcrumb, VBreadcrumbItem } from '@vonage/vivid-api-vue';
</script>

<template>
  <VBreadcrumb>
    <VBreadcrumbItem text="Breadcrumb text" />
    <VBreadcrumbItem text="Breadcrumb text" />
  </VBreadcrumb>
</template>

Href

Use the href attribute on the breadcrumb-item to set its link.

<script setup lang="ts">
import { VBreadcrumb, VBreadcrumbItem } from '@vonage/vivid-api-vue';
</script>

<template>
  <VBreadcrumb>
    <VBreadcrumbItem text="Breadcrumb" href="#" />
    <VBreadcrumbItem text="Breadcrumb" href="#" />
    <VBreadcrumbItem text="Breadcrumb" href="#" />
  </VBreadcrumb>
</template>

<vwc-breadcrumb>
  <vwc-breadcrumb-item text="Breadcrumb" href="#"></vwc-breadcrumb-item>
  <vwc-breadcrumb-item text="Breadcrumb" href="#"></vwc-breadcrumb-item>
  <vwc-breadcrumb-item text="Breadcrumb" href="#"></vwc-breadcrumb-item>
</vwc-breadcrumb>