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:

Properties	Descriptions	Required	Default
links[]	Array of link. It is the base element of Breadcrumbs

Examples:

JavaScript

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 '...'",
      },
    ],
  });
}

React

import { ReactWhisper } from '@oliveai/ldk';
import * as React from 'react';
import { Link, WhisperComponentType } from '@oliveai/ldk/dist/whisper/types';


const BreadCrumbTest: React.FunctionComponent<Object> = (props) => {
  const [step, updateStep] = React.useState(1);

  const LINKS_ARRAY: Link[] = [
    {
      type: WhisperComponentType.Link,
      text: 'Breadcrumb 1',
      onClick: () => {
        updateStep(2);
      },
    },
    { 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' },
  ];
  return (
    <oh-whisper label="Breadcrumb Example" onClose={() => console.debug('Breadcrumb test closed.')}>
      <>
        {step === 1 && <oh-breadcrumbs links={LINKS_ARRAY}></oh-breadcrumbs>}
        {step === 2 && <oh-markdown body="Breadcrumb example updated!"></oh-markdown>}

        <oh-message body=" 5 breadcrumbs with Breadcrumb2 and Breadcrumb3 collapsed in '...'"></oh-message>
      </>
    </oh-whisper>
  );
};
ReactWhisper.renderNewWhisper(<BreadCrumbTest />);