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
1
import { whisper } from '@oliveai/ldk';
2
import {
3
Whisper,
4
WhisperComponentType,
5
} from '@oliveai/ldk/dist/whisper/types';
6
7
const breadcrumbWhisper = async () => {
8
await whisper.create({
9
label: 'Breadcrumb Example',
10
onClose: () => {
11
console.debug('Breadcrumb test closed.');
12
},
13
components: [
14
{
15
type: WhisperComponentType.Breadcrumbs,
16
links: [
17
{
18
type: WhisperComponentType.Link,
19
text: 'Breadcrumb 1',
20
onClick: (_error, onClickWhisper: Whisper) => {
21
onClickWhisper.update({
22
label: 'Breadcrumb example update',
23
components: [
24
{
25
type: whisper.WhisperComponentType.Markdown,
26
body: 'Breadcrumb example updated!',
27
},
28
],
29
});
30
},
31
},
32
{
33
type: WhisperComponentType.Link,
34
text: 'Breadcrumb 2',
35
href: 'https://www.google.com',
36
},
37
{
38
type: WhisperComponentType.Link,
39
text: 'Breadcrumb 3',
40
},
41
{
42
type: WhisperComponentType.Link,
43
text: 'Breadcrumb 4',
44
},
45
{
46
type: WhisperComponentType.Link,
47
text: 'Breadcrumb 5',
48
},
49
],
50
},
51
{
52
type: WhisperComponentType.Message,
53
body: " 5 breadcrumbs with Breadcrumb2 and Breadcrumb3 collapsed in '...'",
54
},
55
],
56
});
57
}
58
Copied!
1
import { ReactWhisper } from '@oliveai/ldk';
2
import * as React from 'react';
3
import { Link, WhisperComponentType } from '@oliveai/ldk/dist/whisper/types';
4
5
6
const BreadCrumbTest: React.FunctionComponent<Object> = (props) => {
7
const [step, updateStep] = React.useState(1);
8
9
const LINKS_ARRAY: Link[] = [
10
{
11
type: WhisperComponentType.Link,
12
text: 'Breadcrumb 1',
13
onClick: () => {
14
updateStep(2);
15
},
16
},
17
{ type: WhisperComponentType.Link, text: 'Breadcrumb 2', href: 'https://www.google.com' },
18
{ type: WhisperComponentType.Link, text: 'Breadcrumb 3' },
19
{ type: WhisperComponentType.Link, text: 'Breadcrumb 4' },
20
{ type: WhisperComponentType.Link, text: 'Breadcrumb 5' },
21
];
22
return (
23
<oh-whisper label="Breadcrumb Example" onClose={() => console.debug('Breadcrumb test closed.')}>
24
<>
25
{step === 1 && <oh-breadcrumbs links={LINKS_ARRAY}></oh-breadcrumbs>}
26
{step === 2 && <oh-markdown body="Breadcrumb example updated!"></oh-markdown>}
27
28
<oh-message body=" 5 breadcrumbs with Breadcrumb2 and Breadcrumb3 collapsed in '...'"></oh-message>
29
</>
30
</oh-whisper>
31
);
32
};
33
ReactWhisper.renderNewWhisper(<BreadCrumbTest />);
34
Copied!
Copy link