@asphalt-react/breadcrumb

Breadcrumb

Breadcrumb gives users navigational awareness inside the app. It is collection of Crumbs & Separators. Breadcrumb uses / as separator by default but it also enables customizing it. Crumbs work with both an anchor tag or any client side routers. Crumbs can also have a non link text as well.

Breadcrumb adds a scroll when the number of Crumbs exceeds the space available, Additionally you can collapse some Crumbs to have compact form. Breadcrumb is a controlled component.

Usage

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

<Breadcrumb
   crumbs={[
      <Crumb key="0">
         <CrumbLink asProps={{ href: "/" }}>
           Home
         </CrumbLink>,
      </Crumb>,
      <Crumb key="1">
         <CrumbLink asProps={{ href: "/blog" }}>
           Blog
         </CrumbLink>
      </Crumb>,
      <Crumb key="2">
         <CrumbLink asProps={{ href: "/blog/boom" }}>
           Boom
         </CrumbLink>
      </Crumb>
   ]}
/>

Building Blocks

1. Breadcrumb component comes with:

   • BaseBreadcrumb
   • Crumb
   • CrumbLink
   • CrumbText
   • Separator

2. BaseBreadcrumb is a wrapper component which renders an ordered list containing its children.

3. Use Crumb to create a list item for Breadcrumb.

4. Use CrumbLink to create link for Breadcrumb.

5. You can provide custom separator using Separator.

Collapsed Breadcrumb

Breadcrumbs can render in collapsed mode. Breadcrumb doesn't manage the collapsed state on its own it depends on collapsed prop to change the state from expanded to collapsed and vice versa. In collapsed state you can choose to hide specific Crumbs using collapseIndices prop and render a button instead. This button invokes onCollapse callback to expand the hidden Crumbs. You can also pass any custom node using collapseAs prop but in that case you need to handle the interaction on your own.

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

export default App() {
const [collapsed, setCollapsed] = React.useState(true)

return (
   <Breadcrumb
        collapsed={collapsed}
        collapseIndices={[1]}
        onCollapse={() => setCollapsed(false)}
        crumbs={[
          <Crumb key="0">
            <CrumbLink as={Link} asProps={{ to: "/" }}>
              Home
            </CrumbLink>
          </Crumb>,
          <Crumb key="1">
            <CrumbLink as={Link} asProps={{ to: "/blog" }}>
              Blog
            </CrumbLink>
          </Crumb>,
          <Crumb key="2">
            <CrumbLink  as={Link} asProps={{ to: "/blog/boom" }}>
              Boom
            </CrumbLink>
          </Crumb>,
        ]}
   />
   )
}

Accessibility

1. All Crumbs are focusable and keyboard navigable through tab (or shift+tab when tabbing backwards).
2. Breadcrumbs add appropriate aria-labels.
3. Separators have aria-hidden to hide it from assistive technology.
4. All Crumbs accept the aria-* attributes for the link role.

Props

crumbs

List of crumbs.

type	required	default
arrayOf	true	N/A

collapsed

Makes Breadcrumb collapse.

type	required	default
bool	false	false

separator

React node for separator.

type	required	default
node	false	"/"

collapseAs

React node render in the collapsed state of Breadcrumb

type	required	default
node	false	null

collapseIndices

crumbs indices to collapse, must be in range and consecutive numbers.

type	required	default
arrayOf	false	[]

onCollapse

function to call when collapseAs is clicked.

type	required	default
func	false	null

BaseBreadcrumb

BaseBreadcrumb is base wrapper component which renders an ordered list containing its children. It adds scroll on overflow to make its content visible.

Props

children

React node to render as children

type	required	default
node	true	N/A

Crumb

Component to add a list item in Breadcrumb.

Props

children

React node to render link content.

type	required	default
node	true	N/A

CrumbLink

Component to add link in Crumb. CrumbLink handles the link pseudo-classes and additionally you can remove the ":visited" pseudo-class using visited prop.

Props

children

React node to render as children.

type	required	default
node	true	N/A

as

Html element/React component to replace the default element. Using this prop, you can use your router's link element, such as "react-router-dom"'s Link element.

type	required	default
elementType	false	"a"

asProps

Pass the props such as "href", "id" for the custom link element passed in as prop.

type	required	default
object	false	{}

visited

shows visited state for the link.

type	required	default
bool	false	true

CrumbText

Component to add text in Crumb list item.

Props

children

React node to render as children.

type	required	default
node	true	N/A

Separator

Component to add the separator symbol between crumbs.

Props

children

React node to render as children.

type	required	default
node	true	N/A