LogoLogo
Developer HubGitHubContact Us
  • Welcome!
  • Olive Helps
    • Platform
      • How Olive Helps Works
      • Installation
      • Account Creation
      • Distributing Olive Helps
    • FAQs
      • General Loop FAQs
      • Loop Development FAQs
      • Olive Helps User FAQs
      • Security / IT FAQs
    • Data Security
      • User Data
      • Antivirus and Firewalls
  • Loop Development Kit
    • Your First Loop
      • Become a Loop Author
      • Creating a Loop
      • Build Your Loop
      • Local Loop Installation
      • Restarting Local Loops
    • Troubleshooting
    • Loop Security
      • Permissions
      • Environment Permissions
    • Loop Publication
      • Loop Approval Checklist
    • Loop Analytics Library
    • Examples
  • Documentation
  • Interfaces
  • Type Alias
  • Enumerations
  • Whisper Components
    • Base Attributes
    • Autocomplete
    • Box
    • Breadcrumb
    • Button
    • Chart
    • CollapseBox
    • Grid
    • Checkbox
    • Date Time
    • Divider
    • DropZone
    • Email
    • Icon
    • List Pair
    • Link
    • Pagination
    • Number
    • Markdown
    • Message
    • Password
    • Progress
    • Radio
    • Rating
    • RichTextEditor
    • Section Title
    • Select
    • Text Input
    • Telephone
    • Typography
  • APTITUDES
    • What are Aptitudes?
    • Browser
    • Clipboard
    • Config
    • Cursor
      • Screen Scaling Behavior
    • Document
    • Filesystem
    • Keyboard
    • Network
    • Process
    • Screen
    • Search
      • Index
    • System
    • UI
      • Loop UI Handlers
    • User
      • JWT
    • Vault
    • Whisper
      • Whisper Updates
      • JSX Whispers
    • Window
      • Screen Scaling Behavior
  • Release Notes
    • What's New
      • Olive Helps v0.55.0
      • Olive Helps v0.54.1
      • Olive Helps v0.53.1
      • Olive Helps v0.51.2
      • LDK v4.0.0
      • Olive Helps v0.50.3
      • Olive Helps v0.49.5
      • LDK v 3.18.0
      • Olive Helps v0.47.2
      • Olive Helps v0.46.2
      • LDK v 3.17.0
      • Olive Helps v0.45.4
      • Olive Helps v0.44.2
      • Olive Helps v0.43.1
      • Olive Helps v0.42.1
      • Olive Helps v0.41.4
      • Olive Helps v0.40.2
      • Olive Helps v0.39.4 & LDK v3.16.0
      • Olive Helps v0.38.8 & LDK v3.15.0
      • Olive Helps v0.36.5
      • Olive Helps v0.36.4
    • Archive
      • Olive Helps v0.36.3 & LDK v3.14.0
      • Olive Helps v0.34.4
      • LDK v3.13.0
      • Olive Helps v0.32.2 & LDK v3.12.0
      • Olive Helps v0.31.2 & LDK v3.11.0
      • Olive Helps v0.30.2 & LDK v3.10.0
      • Olive Helps v0.29.4
      • Olive Helps v0.29.3 & LDK v3.9.0
      • Olive Helps v0.28.3 & LDK v3.8.0
      • Olive Helps v0.27.7
      • Olive Helps v0.27.5
      • Olive Helps v.027.4
      • Olive Helps v0.27.2 & LDK v3.7.0
      • Olive Helps v0.25.3 & LDK v3.5.1
      • Olive Helps v0.24.6 & LDK v3.4.0
      • Olive Helps v0.23.2 & LDK v3.3.0
      • Olive Helps v0.22.3 & LDK v3.2.0
Powered by GitBook
On this page
  • Props:
  • Examples:

Was this helpful?

  1. Whisper Components

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.

PreviousBoxNextButton

Last updated 3 years ago

Was this helpful?

Props:

Properties
Descriptions
Required
Default

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