Breadcrumbs help users visualize their current location in relation to the rest of the website or application by showing the hierarchy of pages.
Interact with a live demo of the ak-breadcrumbs component with code examples.
npm install ak-breadcrumbs
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
);
Kind: global class
-
Properties
-
breadcrumbs.isExpanded :
boolean
-
breadcrumbs.maxItems :
number
-
breadcrumbs.onExpand :
function
-
breadcrumbs.children :
node
|Array.<node>
-
breadcrumbs.isExpanded :
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 />);
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
The maximum number of items to display before automatically collapsing the list of breadcrumbs.
Kind: instance property of Breadcrumbs
Default: 8
Callback that is called when the ellipsis expander item is selected.
Kind: instance property of Breadcrumbs
Required:
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
Kind: global class
-
Properties
-
breadcrumbsItem.href :
string
-
breadcrumbsItem.text :
string
-
BreadcrumbsItem.iconBefore :
element
-
BreadcrumbsItem.iconAfter :
element
-
breadcrumbsItem.href :
BreadcrumbsItem React component.
JS Example
import { AkBreadcrumbsItem } from 'ak-breadcrumbs';
ReactDOM.render(<AkBreadcrumbsItem href="/item">Item</AkBreadcrumbsItem);
The target URL.
Kind: instance property of BreadcrumbsItem
The text content of the item.
Kind: instance property of BreadcrumbsItem
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
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
Let us know what you think of our components and docs, your feedback is really important for us.
Ask a question in our forum.
Check if someone has already asked the same question before.
Are you in trouble? Let us know!