ak-breadcrumbs

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

BreadcrumbsItem

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!