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
React
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 />);
Copy link
On this page
Props:
Examples: