You are viewing the legacy documentation of Plasma featuring the components from the@coveord/plasma-react and @coveord/plasma-style packages. Those packages are deprecated and replaced by the @coveord/plasma-mantine package.

Breadcrumbs

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

View source

1
import {BreadcrumbHeader} from '@coveord/plasma-react';
2

3
export default () => (
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
);

Props

Name	Type	Default	Description
`breadcrumb`required	`IBreadcrumbProps`		Allows to configure the breadcrumb shown in the header
`actions`	`IContentProps[]`		Action buttons displayed in the right portion of the header
`children`	`ReactNode`
`classes`	`string[]`		Additional CSS classes to set on the HeaderWrapper element
`description`	`ReactNode`		Text that appears above the tabs in the header wrapper
`hasBorderBottom`	`boolean`	`true`	Whether the header displays a border on the bottom
`hasPadding`	`boolean`	`true`	Whether the header has padding
`tabs`	`ITabProps[]`		Array of tabs, see Tab Component for details

Examples

With documentation link and tabs

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
export default () => (
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
);

No guidelines exist for BreadcrumbHeader yet.

Create guidelines