API
BreadcrumbCore
Parameters
element
HTMLElement DOM element for component instantiation and scopeoptions
Object (optional, default{}
)options.ellipsisButtonSelector
String (optional, default'[data-ecl-breadcrumb-core-ellipsis-button]'
)options.ellipsisSelector
String (optional, default'[data-ecl-breadcrumb-core-ellipsis]'
)options.segmentSelector
String (optional, default'[data-ecl-breadcrumb-core-item]'
)options.expandableItemsSelector
String (optional, default'[data-ecl-breadcrumb-core-item="expandable"]'
)options.staticItemsSelector
String (optional, default'[data-ecl-breadcrumb-core-item="static"]'
)options.onPartialExpand
Function (optional, defaultnull
)options.onFullExpand
Function (optional, defaultnull
)options.attachClickListener
Boolean (optional, defaulttrue
)
init
Initialise component.
destroy
Destroy component.
handleClickOnEllipsis
Invoke event listener attached on the elipsis. Traslates to a full expand.
check
Apply partial or full expand.
hideEllipsis
Removes the elipsis element and its event listeners.
showAllItems
Show all expandable elements.
handlePartialExpand
Parameters
visibilityMap
Object
handleFullExpand
Display all elements.
computeVisibilityMap
Measure/evaluate which elements can be displayed and toggle those who don't fit.
autoInit
Parameters
root
HTMLElement DOM element for component instantiation and scope$1
Object (optional, default{}
)$1.BREADCRUMB_CORE
(optional, default{}
)
Returns Breadcrumb An instance of Breadcrumb.
Setup
There are 2 ways to initialise the component.
Automatic
Add data-ecl-auto-init
attribute to component's markup
<nav
class="ecl-breadcrumb"
aria-label="You are here:"
data-ecl-breadcrumb-core
data-ecl-auto-init="BreadcrumbCore"
>
...
</nav>
Possible values:
BreadcrumbCore
BreadcrumbStandardised
BreadcrumbHarmonised
Use the ECL
library's autoInit()
(ECL.autoInit()
) when your page is ready or other custom event you want to hook onto.
Manual
Get target element, create an instance and invoke init()
.
Given you have 1 element with an attribute data-ecl-breadcrumb-core
on the page:
var elt = document.querySelector('[data-ecl-breadcrumb-core]');
var breadcrumb = new ECL.BreadcrumbCore(elt);
breadcrumb.init();