@asphalt-react/breadcrumb v1.17.0

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

as

HTML or React element to render as a crumb

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

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

separator

Custom separator text

Separator

Component to add the separator symbol between crumbs.

Props

symbol

Custom separator text

Crumb

Component to add each individual link in the Breadcrumb.

Props

as

HTML or React element to render as a crumb

tagProps

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

text

Caption for the crumb

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

noLink

Renders crumb as a non-link element