Breadcrumbs

Breadcrumbs are a set of links or labels used for navigation and context.

Import Syntax

xxxxxxxxxx
 
import Breadcrumbs, { Crumb } from 'calcite-react/Breadcrumbs'

Basic Usage

white

 
<GuideExample>
  <Breadcrumbs>
    <Crumb href="#">Thing</Crumb>
    <Crumb>Thing</Crumb>
    <Crumb href="#">Thing</Crumb>
    <Crumb href="#">Current</Crumb>
  </Breadcrumbs>
</GuideExample>
<GuideExample
  label="white"
  style={{ background: CalciteTheme.palette.offBlack }}
>
  <Breadcrumbs white>
    <Crumb href="#">Thing</Crumb>
    <Crumb>Thing</Crumb>
    <Crumb href="#">Thing</Crumb>
    <Crumb href="#">Current</Crumb>
  </Breadcrumbs>
</GuideExample>

Custom Divider Character

dividerCharacter="»"

 
<GuideExample label={`dividerCharacter="»"`}>
  <Breadcrumbs dividerCharacter="»">
    <Crumb href="#">Thing</Crumb>
    <Crumb>Thing</Crumb>
    <Crumb href="#">Thing</Crumb>
    <Crumb href="#">Current</Crumb>
  </Breadcrumbs>
</GuideExample>

Props

Breadcrumbs `default`

Property	Type	Required	Default	Description
dividerCharacter	Node	false	/	The character used as a divider between Crumbs
children	Node	false	-	Crumb components to be rendered within Breadcrumbs.
white	Bool	false	-	Color modifier for the Breadcrumbs.

Crumb

Property	Type	Required	Default	Description
children	Node	false	-	Text content of the Breadcrumb.
white	Bool	false	-	Boolean to toggle the light style for Breadcrumbs.
href	String	false	-	href html prop
dividerCharacter	Node	false	-	The character used as a divider between Crumbs; by default it will inherit the parent Breadcrumbs dividerCharacter
hasLink	Bool	false	-	Use hasLink as a way to maintain the calcite link styles when no href is given (useful when using a Crumb with an outside routing library).

Calcite React

Breadcrumbs

Import Syntax

Basic Usage

Custom Divider Character

Props

Breadcrumbs default

Crumb

Breadcrumbs `default`