Breadcrumb
!npm
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.
``js
import { Breadcrumb, Crumb, CrumbLink } from "@asphalt-react/breadcrumb"
Home
Blog
Boom
]}
/>
`
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.
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.
`js
import { Breadcrumb, Crumb, CrumbLink } from "@asphalt-react/breadcrumb"
export default App() {
const [collapsed, setCollapsed] = React.useState(true)
return (
collapseIndices={[1]}
onCollapse={() => setCollapsed(false)}
crumbs={[
Home
Blog
Boom
]}
/>
)
}
`
1. All Crumbs are focusable and keyboard navigable through tab (or shift+tab when tabbing backwards).
2. Breadcrumbs add appropriate aria-labels.aria-hidden
3. Separators have to hide it from assistive technology.
4. All Crumbs accept the aria-\* attributes for the link role.
[comment]: # "Breadcrumb Props"
List of crumbs.
| type | required | default |
| ------- | -------- | ------- |
| arrayOf | true | N/A |
Makes Breadcrumb collapse.
| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |
React node for separator.
| type | required | default |
| ---- | -------- | ------- |
| node | false | "/" |
React node render in the collapsed state of Breadcrumb
| type | required | default |
| ---- | -------- | ------- |
| node | false | null |
crumbs indices to collapse, must be in range and consecutive numbers.
| type | required | default |
| ------- | -------- | ------- |
| arrayOf | false | [] |
function to call when collapseAs is clicked.
| type | required | default |
| ---- | -------- | ------- |
| func | false | null |
BaseBreadcrumb is base wrapper component which renders an ordered list containing its children. It adds scroll on overflow to make its content visible.
[comment]: # "BaseBreadcrumb Props"
React node to render as children
| type | required | default |
| ---- | -------- | ------- |
| node | true | N/A |
Component to add a list item in Breadcrumb.
[comment]: # "Crumb Props"
React node to render link content.
| type | required | default |
| ---- | -------- | ------- |
| node | true | N/A |
Component to add link in Crumb. CrumbLink handles the link pseudo-classes and additionally you can remove the ":visited" pseudo-class using visited prop.
[comment]: # "CrumbLink Props"
React node to render as children.
| type | required | default |
| ---- | -------- | ------- |
| node | true | N/A |
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" |
Pass the props such as "href", "id" for the custom link element passed in as prop.
| type | required | default |
| ------ | -------- | ------- |
| object | false | {} |
shows visited state for the link.
| type | required | default |
| ---- | -------- | ------- |
| bool | false | true |
Component to add text in Crumb` list item.
[comment]: # "CrumbText Props"
React node to render as children.
| type | required | default |
| ---- | -------- | ------- |
| node | true | N/A |
Component to add the separator symbol between crumbs.
[comment]: # "Separator Props"
React node to render as children.
| type | required | default |
| ---- | -------- | ------- |
| node | true | N/A |