Breadcrumb

Breadcrumbs consist of a list of links that help the end user visualize a page's location within the hierarchical structure of a website, and allow navigation up to any of its ancestors.

Props:

PropertiesDescriptionsRequiredDefault

links[]

Array of link. It is the base element of Breadcrumbs

Examples:

import { whisper } from '@oliveai/ldk';
import {
  Whisper,
  WhisperComponentType,
} from '@oliveai/ldk/dist/whisper/types';

const breadcrumbWhisper = async () => {
  await whisper.create({
    label: 'Breadcrumb Example',
    onClose: () => {
      console.debug('Breadcrumb test closed.');
    },
    components: [
      {
        type: WhisperComponentType.Breadcrumbs,
        links: [
          {
            type: WhisperComponentType.Link,
            text: 'Breadcrumb 1',
            onClick: (_error, onClickWhisper: Whisper) => {
              onClickWhisper.update({
                label: 'Breadcrumb example update',
                components: [
                  {
                    type: whisper.WhisperComponentType.Markdown,
                    body: 'Breadcrumb example updated!',
                  },
                ],
              });
            },
          },
          {
            type: WhisperComponentType.Link,
            text: 'Breadcrumb 2',
            href: 'https://www.google.com',
          },
          {
            type: WhisperComponentType.Link,
            text: 'Breadcrumb 3',
          },
          {
            type: WhisperComponentType.Link,
            text: 'Breadcrumb 4',
          },
          {
            type: WhisperComponentType.Link,
            text: 'Breadcrumb 5',
          },
        ],
      },
      {
        type: WhisperComponentType.Message,
        body: " 5 breadcrumbs with Breadcrumb2 and Breadcrumb3 collapsed in '...'",
      },
    ],
  });
}

Last updated