Breadcrumb

Indicates the current page's location within a navigational hierarchy.

Usage

Basic Breadcrumb

Render a Breadcrumb with a list of items.

<Breadcrumb
  items={[
    { key: 'home', href: '/', title: 'Home', active: false },
    { key: 'docs', href: '/docs', title: 'Docs', active: false },
    { key: 'api', href: '/docs/api', title: 'API', active: true },
  ]}
/>

Custom Divider

Use a custom divider instead of the default.

<Breadcrumb
  items={[
    { key: 'home', href: '/', title: 'Home', active: false },
    { key: 'docs', href: '/docs', title: 'Docs', active: false },
    { key: 'api', href: '/docs/api', title: 'API', active: true },
  ]}
  divider={<Icon type={'Zap'} />}
/>

Color & High Contrast

Customize the breadcrumb's appearance using color and highContrast props.

<Breadcrumb
  items={[
    { key: 'home', href: '/', title: 'Home', active: false },
    { key: 'docs', href: '/docs', title: 'Docs', active: false },
    { key: 'api', href: '/docs/api', title: 'API', active: true },
  ]}
  color="grass"
  highContrast={false}
/>

Variants

Inverse the breadcrumb's appearance using variant props.

<Breadcrumb
  variant={'inverse'}
  items={[
    { key: 'home', href: '/', title: 'Home', active: false },
    { key: 'docs', href: '/docs', title: 'Docs', active: false },
    { key: 'api', href: '/docs/api', title: 'API', active: true },
  ]}
  color="grass"
  highContrast={false}
/>

API

Props

Breadcrumb

Prop	Type	Default	Required
variant	'normal' | 'inverse'	'normal'	-
items	BreadcrumbItem[]	-	Yes
divider	ReactNode	'/'	-
color	ThemeAccentColor	-	-
highContrast	boolean	false	-
MarginProps	Token<MarginProps>	-	-

Breadcrumb Item

Prop	Type	Default	Required
key	string	-	Yes
href	string	-	Yes
title	string	-	Yes
active	boolean	-	Yes