ak-breadcrumbs v3.0.2
Breadcrumbs
Breadcrumbs help users visualize their current location in relation to the rest of the website or application by showing the hierarchy of pages.
Try it out
Interact with a live demo of the ak-breadcrumbs component with code examples.
Installation
npm install ak-breadcrumbs
Using the component
React
This is a standard React component.
import AkBreadcrumbs, { AkBreadcrumbsItem } from 'ak-breadcrumbs';
ReactDOM.render(
<AkBreadcrumbs>
<AkBreadcrumbsItem href="/home" text="Home" />
<AkBreadcrumbsItem href="/home/item" text="Item" />
</AkBreadcrumbs>,
container
);
Classes
Breadcrumbs
Kind: global class
Properties
- breadcrumbs.isExpanded : boolean
- breadcrumbs.maxItems : number
- breadcrumbs.onExpand : function
- breadcrumbs.children : node | Array.<node>
new Breadcrumbs()
Breadcrumbs React component.
The Breadcrumbs component will render a list of slash-separated breadcrumb items, and will automatically truncate the list if there are more than 8 items.
JS Example
import Breadcrumbs from 'ak-breadcrumbs';
ReactDOM.render(<Breadcrumbs />);
breadcrumbs.isExpanded : boolean
Whether the breadcrumbs should be expanded when there are 9 or more items.
If this is true, the breadcrumbs will not collapse and show an ellipsis item.
Kind: instance property of Breadcrumbs
Default: false
breadcrumbs.maxItems : number
The maximum number of items to display before automatically collapsing the list of breadcrumbs.
Kind: instance property of Breadcrumbs
Default: 8
breadcrumbs.onExpand : function
Callback that is called when the ellipsis expander item is selected.
Kind: instance property of Breadcrumbs
Required:
breadcrumbs.children : node | Array.<node>
The items to display.
If there are more than the number of items specified by maxItems
, the list will
automatically be truncated to display only the first and last items. Clicking the ellipsis
separator item will display all the items.
Kind: instance property of Breadcrumbs
BreadcrumbsItem
Kind: global class
Properties
- breadcrumbsItem.href : string
- breadcrumbsItem.text : string
- BreadcrumbsItem.iconBefore : element
- BreadcrumbsItem.iconAfter : element
new BreadcrumbsItem()
BreadcrumbsItem React component.
JS Example
import { AkBreadcrumbsItem } from 'ak-breadcrumbs';
ReactDOM.render(<AkBreadcrumbsItem href="/item">Item</AkBreadcrumbsItem);
breadcrumbsItem.href : string
The target URL.
Kind: instance property of BreadcrumbsItem
breadcrumbsItem.text : string
The text content of the item.
Kind: instance property of BreadcrumbsItem
BreadcrumbsItem.iconBefore : element
The icon to display before the item content. Icons specified in this way will always be displayed, even when the content is truncated.
Kind: static property of BreadcrumbsItem
BreadcrumbsItem.iconAfter : element
The icon to display after the item content. Icons specified in this way will always be displayed, even when the content is truncated.
Kind: static property of BreadcrumbsItem
Support and feedback
We're here to help!
Let us know what you think of our components and docs, your feedback is really important for us.
Community support
Ask a question in our forum.
Check if someone has already asked the same question before.
Create a support ticket
Are you in trouble? Let us know!