Breadcrumb - Component API

The Breadcrumb component is composed by different parts, with their own APIs:

• a main "container" (the breadcrumb itself)
• an "item" sub-component (a single "crumb")
• a "truncation" sub-component (a hidden list of "crumbs" that can be made visible via a toggle)

Breadcrumb

Here is the API for the main ("container") component:

itemsCanWrap boolean

This controls if the breadcrumb items can wrap in case they can't fit in the container width.

Default: true

didInsert function

This hook method is called when the component is inserted in the DOM.

Default: noop / () => {}

Notice: internally we use the "did-insert" modifier from @ember/render-modifiers.

...attributes

...attributes spreading is supported on this component.

Notice: by default an attribute aria-label="breadcrumbs" is assigned to the component. If you want to localize it you can override it passing the same attribute with a different value.

Breadcrumb::Item

Here is the API for the "item" sub-component:

text string

The text to show as "crumb" for the item.

icon string

Use this parameter to show an icon. Acceptable value: any Flight icon name.

route/models/model/query

These are the parameters that are passed down as arguments to the <LinkTo> component.

current boolean

This controls if this is the last item in the breadcrumb (in which case it doesn't generate a link).

...attributes

...attributes spreading is supported on this component.

Breadcrumb::Truncation

Here is the API for the "truncation" sub-component:

"yield"

Elements passed as children of this sub-component are yielded to the content of the Disclosure component (used to show/hide the yielded breadcrumb items via a "toggle" button).

...attributes

...attributes spreading is supported on this component.