@asphalt-react/breadcrumb

Breadcrumb

A Breadcrumb component gives users navigational awareness inside the app. It can be used declaratively by combining individual components around the data or it can accept the navigation data structure for a non-declerative use.

While non-declerative use is simpler & faster, declerative use offers a greater control.

Along with the main Breadcrumb component, it exposes 2 more components:

• Separator
• Crumb

Breadcrumb works with both an anchor tag or a higher order component of any router.

Usage

Breadcrumbs can be used in two ways:

1. non-decleratively - Using crumbs prop

import Breadcrumb from "@asphalt-react/breadcrumb"

<Breadcrumb crumbs=[{
   { text: "Home", to: "/" },
   { text: "Blog", to: "/blog" },
   { text: "Boom", to: "/blog/boom" },
}] />

2. decleratively - Using Crumb & Separator components

import Breadcrumb, { Crumb, Separator } from "@asphalt-react/breadcrumb"

<Breadcrumb>
   <Crumb text="Home" to="/" />
   <Separator symbol=">" />
   <Crumb text="Blog" to="/blog" />
   <Separator symbol=">" />
   <Crumb text="Boom" to="/blog/boom" />
</Breadcrumb>

Props

children

React node to render inside the Breadcrumb

type	required	default
node	false	N/A

as

HTML or React element to render as a crumb

type	required	default
elementType	false	null

tagProps

Props or attributes for the element passed in as prop, these are passed to every crumb. Most of the html global attributes are supported

To have different props or attributes for some crumbs, use linkProps

type	required	default
object	false	{}

crumbs

Array of crumbs object

The crumb object has this shape:

• text: crumb caption
• to: URL for respective crumb,
• linkProps: unique props or attributes for a specific crumb, the tagProps are overridden by linkProps if present

type	required	default
arrayOf	false	[]

separator

Custom separator text

type	required	default
string	false	"/"

Separator

Component to add the separator symbol between crumbs.

Props

symbol

Custom separator text

type	required	default
string	false	"/"

Crumb

Component to add each individual link in the Breadcrumb.

Props

as

HTML or React element to render as a crumb

type	required	default
elementType	false	null

tagProps

Props or attributes for element passed in as prop. It supports most of the html global attributes

type	required	default
object	false	{}

text

Caption for the crumb

type	required	default
string	false	""

to

URL for the respective crumb. Avoid using to along with as prop, use tagProps instead

This prop will be removed in the next major version

type	required	default
string	false	""

noLink

Renders crumb as a non-link element

type	required	default
bool	false	false