Navigation

Breadcrumbs

A breadcrumb is a secondary navigation that helps users to understand the hierarchy of interfaces and navigate through them.

Simple description for the title

1
import {BreadcrumbHeader} from '@coveord/plasma-react';
2
3
const Demo = () => (
4
<BreadcrumbHeader
5
breadcrumb={{
6
title: {
7
text: 'Charmeleon',
8
},
9
links: [
10
{
11
name: 'Pikachu',
12
link: 'https://www.google.ca/?q=pikachu',
13
},
14
],
15
}}
16
description="Simple description for the title"
17
hasBorderBottom={false}
18
/>
19
);
20
export default Demo;

Props

NameTypeDefaultDescription
breadcrumbrequiredIBreadcrumbProps
Allows to configure the breadcrumb shown in the header
actionsIContentProps[]
Action buttons displayed in the right portion of the header
childrenReactNode
classesstring[]
Additional CSS classes to set on the HeaderWrapper element
descriptionReactNode
Text that appears above the tabs in the header wrapper
hasBorderBottombooleantrue
Whether the header displays a border on the bottom
hasPaddingbooleantrue
Whether the header has padding
tabsITabProps[]
Array of tabs, see Tab Component for details

Examples

With documentation link and tabs

Simple description for the title

1
import {BreadcrumbHeader, IBreadcrumbProps} from '@coveord/plasma-react';
2
import {QuestionSize24Px} from '@coveord/plasma-react-icons';
3
4
const defaultBreadcrumb: IBreadcrumbProps = {
5
title: {
6
text: 'Charmeleon',
7
documentationLink: {
8
target: '_blank',
9
icon: QuestionSize24Px,
10
tooltip: {
11
title: "I'm a tooltip!",
12
placement: 'bottom',
13
container: 'body',
14
},
15
},
16
},
17
links: [
18
{
19
name: 'Pikachu',
20
link: 'https://www.google.ca/?q=pikachu',
21
},
22
],
23
};
24
25
const Demo = () => (
26
<BreadcrumbHeader
27
breadcrumb={defaultBreadcrumb}
28
description="Simple description for the title"
29
tabs={[
30
{groupId: 'example2', id: 'tab1', title: 'Digimon'},
31
{groupId: 'example2', id: 'tab2', title: 'Beyblade'},
32
{groupId: 'example2', id: 'tab3', title: 'Pokemon'},
33
]}
34
/>
35
);
36
export default Demo;

No guidelines exist for BreadcrumbHeader yet.

Create guidelines