Breadcrumb

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

Common Usage

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

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

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

Multiple hidden crumbs

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

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

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