Breadcrumb

React breadcrumb navigation component which indicates the current location within a navigational hierarchy that automatically adds separators.

Usage

Example

Script


  return (
    <CBreadcrumb>
      {/*eslint-disable-next-line*/}
      <CBreadcrumbItem><a href="#">Home</a></CBreadcrumbItem>
      {/* eslint-disable-next-line*/}
      <CBreadcrumbItem><a href="#">Library</a></CBreadcrumbItem>
      <CBreadcrumbItem active>Data</CBreadcrumbItem>
    </CBreadcrumb>
  )

# Features

Optional customization of styles
Ready to implement React-router based

# Breadcrumb API

Name	Required	Type	Default Value
children		any
items shown inside or after router
className		string
user classes for the main HTML tag
innerRef		(object \| Function \| string)
ref to the main tag

BreadcrumbItem

# BreadcrumbItem API

Name	Required	Type	Default Value
className		string
user classes for the main HTML tag
innerRef		(object \| Function \| string)
ref to the main tag
active		boolean
active item

BreadcrumbRouter

Usage

Example

Script


  return (
    <CBreadcrumb>
      {/*eslint-disable-next-line*/}
      <CBreadcrumbItem><a href="#">Home</a></CBreadcrumbItem>
      {/* eslint-disable-next-line*/}
      <CBreadcrumbItem><a href="#">Library</a></CBreadcrumbItem>
      <CBreadcrumbItem active>Data</CBreadcrumbItem>
    </CBreadcrumb>
  )

This is the wrapper component for CBreadcrumb. It will render breadcrumb items based on current React-router route. Props are the same as in CBreadcrumb, except you cannot pass items.

# BreadcrumbRouter API

Name	Required	Type	Default Value
className		string
user classes for the main HTML tag
innerRef		(object \| Function \| string)
ref to the main tag
routes		any[]
array of routes