Breadcrumb

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

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" />
  </VBreadcrumb>
</template>

import { registerBreadcrumb, registerBreadcrumbItem } from '@vonage/vivid-api';

registerBreadcrumb('your-prefix');
registerBreadcrumbItem('your-prefix');

<script type="module">
  import { registerBreadcrumb, registerBreadcrumbItem } from '@vonage/vivid-api';
  registerBreadcrumb('your-prefix');
  registerBreadcrumbItem('your-prefix');
</script>

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

API Reference

Name	Description
default	Default slot.

Name	Description
default	Default slot.

Property	Type	Description
download	`string`	Prompts the user to save the linked URL. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a \| <a> element for more information.
href	`string`	The URL the hyperlink references. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a \| <a> element for more information.
hreflang	`string`	Hints at the language of the referenced resource. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a \| <a> element for more information.
ping	`string`	See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a \| <a> element for more information.
referrerpolicy	`string`	See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a \| <a> element for more information.
rel	`string`	See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a \| <a> element for more information.
target	`'_self' \| '_blank' \| '_parent' \| '_top'`	See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a \| <a> element for more information.
text	`string`
type	`string`	See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a \| <a> element for more information.

Property	Type	Description
download	`string`	Prompts the user to save the linked URL. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a \| <a> element for more information.
href	`string`	The URL the hyperlink references. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a \| <a> element for more information.
hreflang	`string`	Hints at the language of the referenced resource. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a \| <a> element for more information.
ping	`string`	See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a \| <a> element for more information.
referrerpolicy	`string`	See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a \| <a> element for more information.
rel	`string`	See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a \| <a> element for more information.
target	`'_self' \| '_blank' \| '_parent' \| '_top'`	See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a \| <a> element for more information.
text	`string`
type	`string`	See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a \| <a> element for more information.

Breadcrumb

Usage

API Reference

breadcrumb

Slots

breadcrumb-item

Properties