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