Breadcrumb

API

Breadcrumb

Parameters

• element HTMLElement DOM element for component instantiation and scope

• options Object (optional, default {})

  • options.ellipsisButtonSelector String (optional, default '[data-ecl-breadcrumb-ellipsis-button]')
  • options.ellipsisSelector String (optional, default '[data-ecl-breadcrumb-ellipsis]')
  • options.segmentSelector String (optional, default '[data-ecl-breadcrumb-item]')
  • options.expandableItemsSelector String (optional, default '[data-ecl-breadcrumb-item="expandable"]')
  • options.staticItemsSelector String (optional, default '[data-ecl-breadcrumb-item="static"]')
  • options.onPartialExpand Function (optional, default null)
  • options.onFullExpand Function (optional, default null)
  • options.attachClickListener Boolean (optional, default true)

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 (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
  data-ecl-auto-init="Breadcrumb"
>
  ...
</nav>

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 on the page:

var elt = document.querySelector('[data-ecl-breadcrumb]');
var breadcrumb = new ECL.Breadcrumb(elt);
breadcrumb.init();