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 |