Plasma Design System
Home
Foundations
Typekit
Links
Spacing
Layout
Banner
Blankslate
Bordered line
Browser preview
Chart
Child form
Collapsible
Icon card
Info box
Labeled value
Limit card
Modal
Modal wizard
Page header
Section
Split layout
Sticky footer
Table
Form
Actionable item
Button
Checkbox
Code editor
Color picker
Countdown
Date picker
Diff viewer
Facet
File picker
Filter box
Flat select
JSON editor
Multiline box
Numeric input
Radio button
Search bar
Select - single
Select - multi
Slider
Text area
Text input
Navigation
Breadcrumbs
Sidebar navigation
SubNavigation
Tabs
Feedback
Badge
Color bar
Color dot
Icon badge
Last updated
Loading spinner
Step progress bar
Sync feedback
Toast
Tooltip
Advanced
Action bar
Info token
Link svg
List box
Options cycle
Partial string match
Slide Y
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.
Return to the latest documentation
Navigation

Breadcrumbs

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

Simple description for the title

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

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
  • Pikachu
  • Charmeleon

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
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