HexagonJS
About
InstallationCore ConceptsChangelog[Migration (1.x -> 2.x)]
Tutorials
Getting StartedPrint Styles
Demos
Component Demo Page
Css Components
BaseButtonBadgeError PagesFormInputsInput GroupLabelLayoutLogoNoticeSpinnerTable
Js Components
Alerts and MessagesAutocomplete PickerAutocompleteButton GroupCardCollapsibleColor PickerCrumbtrailData TableDate PickerDate Time PickerDrag ContainerDrawingDropdownDropdown ButtonExtended TableFile InputFluidForm BuilderInline EditableInline PickerInline SelectMenuMeterModalMore ButtonNotifyNumber PickerPaginatorPickerPivot TablePlotProgress BarSide CollapsibleSidebarSingle SelectSliderStepperSticky Table HeadersTabsTag InputTime PickerTime SliderTitlebarToggle ButtonToggleTooltipTreeVisualization Bar
Utilities
AnimateClick DetectorColor ScaleColorComponentEvent EmitterFast ClickFilterFormatInterpolateListMapMorph SectionMorphsPalettePointer EventsPreferencesRequestResize EventsSearch DomSelectSelectionSetSortTransitionUser Facing TextUtilView
Edit Page
Crumbtrail
A crumbtrail component, used to illustrate where you are in relation to the root of a project or website.
Examples
First Node Second Node Third Node

HTML

<div id="crumbs" class="hx-crumbtrail">
  <span class="hx-crumbtrail-node">First Node</span>
  <span class="hx-crumbtrail-separator"><i class="fa fa-angle-right"></i></span>
  <span class="hx-crumbtrail-node">Second Node</span>
  <span class="hx-crumbtrail-separator"><i class="fa fa-angle-right"></i></span>
  <span class="hx-crumbtrail-node">Third Node</span>
</div>

HTML

<div id="crumbs-2" class="hx-crumbtrail"></div>

JavaScript

new hx.Crumbtrail("#crumbs-2", {
  renderer: function(element, datum) {
    hx.select(element).text(datum)
  },
  items: ["First Node", "Second Node", "Third Node"],
  separator: '>>>>'
})
Api
Change Log
Prototypes
hx.Crumbtrail
A class that can be used to build a crumbtrail dynamically.
Constructors
hx.CrumbtrailselectorString / HTMLElementoptionsObject
Creates a crumbtrail element for rendering a crumbtrail from JSON. Not required when building a HTML crumbtrail.
Arguments
selectorString / HTMLElement
An HTMLElement or CSS selector that uniquely identifies your crumbtrail.
options
The options to use when creating the crumbtrail
Properties
itemsArray
A nested array of objects that represent nodes in the crumbtrail.
rendererelementHTMLElementdataAny
A function that turns object nodes to dom elements. 
crumbtrail = new hx.Crumbtrail("#crumbs-2");
renderer = function(element, data) {
  hx.select(element).text(data);
}
crumbtrail.render(data, renderer);
Arguments
elementHTMLElement
The node of the crumbtrail.
dataAny
The data related to the current crumbtrail node.
separatorString
A string or some html that separates each element in the crumbtrail. Defaults to '/'
Methods
itemsitemsArrayCrumbtrail / Array
Sets the items for a crumbtrail.
Arguments
itemsArray
A nested array of objects that represent nodes in the crumbtrail.
Returns
Crumbtrail / Array
This Crumbtrail.
itemsArray
Gets the items for a crumbtrail.
Returns
Array
The currently set items.
rendererrenderFunctionCrumbtrail
Sets the renderer for a crumbtrail.
Arguments
renderelementHTMLElementdataAny
A function that turns object nodes to dom elements. 
crumbtrail = new hx.Crumbtrail("#crumbs-2");
renderer = function(element, data) {
  hx.select(element).text(data);
}
crumbtrail.render(data, renderer);
Arguments
elementHTMLElement
The node of the crumbtrail.
dataAny
The data related to the current crumbtrail node.
Returns
Crumbtrail
This Crumbtrail.
rendererFunction
Gets the renderer for a crumbtrail.
Returns
function
The currently set renderer
Functions
hx.crumbtrailoptionsObjectSelection
Creates a new Crumbtrail set up on a detached element, wrapped in a selection
Arguments
options
See the options object for constructing Crumbtrail
Returns
Selection
A selection containing an element with an Crumbtrail initialised on it