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
Menu
A dropdown containing a list of selectable items.
Examples

HTML

<button id="menuDefault" class="hx-btn">Default</button>
<button id="menuDisabled" class="hx-btn">Disabled menu items</button>
<button id="menuNoSelect" class="hx-btn">Unselectable menu items</button>
<button id="menuMixed" class="hx-btn">Mixed Items</button>

JavaScript

defaultMenu = new hx.Menu('#menuDefault')
defaultMenu.items(["item 1","item 2","item 3"])

disabledMenu = new hx.Menu('#menuDisabled')
disabledMenu.items([
  {
    text: 'Disabled Item 1',
    disabled: true
  },{
    text: 'Disabled Item 2',
    disabled: true
  },{
    text: 'Disabled Item 3',
    disabled: true
  }
])

unselectableMenu = new hx.Menu('#menuNoSelect')
unselectableMenu.items([
  {
    text: 'Unselectable Item 1',
    unselectable: true
  },{
    text: 'Unselectable Item 2',
    unselectable: true
  },{
    text: 'Unselectable Item 3',
    unselectable: true
  }
])

mixedMenu = new hx.Menu('#menuMixed')
mixedMenu.items([
  {
    text: 'Disabled Item 1',
    disabled: true
  },{
    text: 'Item 1'
  },{
    text: 'Disabled Item 2',
    disabled: true
  },{
    text: 'Unselectable Item 1',
    unselectable: true
  },{
    text: 'Item 2'
  },{
    text: 'Unselectable Item 2',
    unselectable: true
  }
])

HTML

<button class="hx-btn hx-action menuButtonNamed">hx-action</button>
<button class="hx-btn hx-positive menuButtonNamed">hx-positive</button>
<button class="hx-btn hx-negative menuButtonNamed">hx-negative</button>
<button class="hx-btn hx-warning menuButtonNamed">hx-warning</button>
<button class="hx-btn hx-info menuButtonNamed">hx-info</button>
<button class="hx-btn hx-contrast menuButtonNamed">hx-contrast</button>
<button class="hx-btn hx-compliment menuButtonNamed">hx-compliment</button>

JavaScript

menuItems = ["item 1","item 2","item 3"]
menuExample = hx.selectAll('.menuButtonNamed').forEach(function(node){
  menu = new hx.Menu(node.node());
  menu.items(menuItems);
});

HTML

<button class="hx-btn" id="collapsibleMenu">Menu with children</button>
<button class="hx-btn" id="collapsibleMenu-feature-flag">Menu with children (feature flag)</button>

JavaScript

menu = new hx.Menu('#collapsibleMenu', {
  items:[
    {
      text: 'Item 1',
      children: [
        'Sub item 1',
        'Sub item 2',
      ]
    },
    {
      text: 'Item 2',
      children: [
        'Sub item 1',
        'Sub item 2',
      ]
    }
  ]
});

menu = new hx.Menu('#collapsibleMenu-feature-flag', {
  featureFlags: {
    useUpdatedStructure: true,
  },
  items:[
    {
      text: 'Item 1',
      children: [
        'Sub item 1',
        'Sub item 2',
      ]
    },
    {
      text: 'Item 2',
      children: [
        'Sub item 1',
        'Sub item 2',
      ]
    }
  ]
});
Api
Change Log
Prototypes
hx.MenuextendsEventEmitter
A class used to create dropdown menus using hx.Dropdown and a list of menu items.
Constructors
hx.MenuselectorString / HTMLElementoptionsObject
Arguments
selectorString / HTMLElement
The element that will call the menu when clicked or hovered over
options
The options to use when setting up the menu.
Properties
disabledBoolean
Whether the menu should be disabled
Default: false
dropdownOptions
The options to use for the dropdown. See the See the dropdown constructor for the available options.
featureFlags
Feature flags that apply features and functionality that will be made either default or relies on other feature flags in the next major release
Properties
useUpdatedStructureBoolean
Whether to display the menu with the improved UI structure. This removes the collapsible content from grouped items.
itemsFunction / Array[Object]
A function that provides the items, or an array of the items.
rendererelementHTMLElementitemObject
The renderer function for an item
Arguments
elementHTMLElement
The dropdown element
item
The menu item to be rendered
Events
activeset
The event called when a menu item is set as the active item. This can only be done by the keyboard or when the user clicks on an item
Properties
eventTypeString
The type of event that caused the selection:
  • 'click' - User clicked
  • 'arrow' - User used the arrow keys
itemString / Object
The menu item as it was passed into the menu.
change
The event called when a menu item is selected.
Properties
eventTypeString
The type of event that caused the selection:
  • 'click' - User clicked
  • 'enter' - User pressed the enter key
  • 'tab' - User pressed the tab key
itemString / Object
The menu item as it was passed into the menu.
menuMenu
This Menu.
dropdown.changeBoolean
Emitted when the dropdown is shown or hidden. The data sent with this event is a boolean indicating whether or not the dropdown is visible. True means that the dropdown has just been shown, false means it has just been hidden.
dropdown.hideend
Emitted when the dropdown animation ends. No data is sent with this event.
dropdown.hidestart
Emitted when the dropdown animation starts. No data is sent with this event.
dropdown.showend
Emitted when the dropdown animation finishes. No data is sent with this event.
dropdown.showstart
Emitted when the dropdown animation starts. No data is sent with this event.
highlight
The event called when a menu item is set as the active item. This can only be done by the keyboard or when the user clicks on an item
Properties
eventTypeString
The type of event that caused the selection:
  • 'click' - User clicked
  • 'arrow' - User used the arrow keys
itemString / Object
The menu item as it was passed into the menu.
menuMenu
This Menu.
select
The event called when a menu item is selected.
Properties
eventTypeString
The type of event that caused the selection:
  • 'click' - User clicked
  • 'enter' - User pressed the enter key
  • 'tab' - User pressed the tab key
itemString / Object
The menu item as it was passed into the menu.
Methods
addExceptionelementHTMLElementMenu
Adds an exception to the click handler for an element so that clicking on the element won't cause the menu to close.
Arguments
elementHTMLElement
The element to add an exception for.
Returns
Menu
This Menu
disabledvalueBooleanMenu
A method for disabling or enabling a menu
Arguments
valueBoolean
Whether the menu should be disabled
Returns
Menu
This menu
disabledBoolean
A method for getting the disabled state of a menu
Returns
Boolean
Whether the menu is disabled
hideMenu
Hides the menu.
Returns
Menu
This Menu
itemsdataFunctionMenu
A method for setting the data for the menu using a function.
Arguments
datacallbackFunction
The function to call to get the data. This will be called whenever the menu is opened, allowing the data to be changed easily.
It is recommended that the data for a select be cached where possible when using the function to set the data.
Arguments
callbackdataArray[String / Object]
The function to call when the data has loaded
Arguments
dataArray[String / Object]
The items to add to the menu.
Returns
Menu
This Menu
itemsitemsArray[Object]Menu
Sets the menu items
Arguments
itemsArray[Object]
The data to render. The format depends on what renderer is used, the default renderer expects an array of strings.
Returns
Menu
This Menu
itemsArray / Function
A method for getting the current items for the menu.
Returns
Array / Function
The currently set items array of function for the menu.
rendererrenderFunctionMenu
A method used to set a custom renderer for a menu 
menu = new hx.Menu('#selector');
menu.renderer(function(elem, item){
  // do your render stuff
});
menu.render(data);
Arguments
renderelementHTMLElementitemObject
The function that converts an item into html and attaches it to the element supplied. This function is not intended to be called externally but can be redefined to change how the menu is created.
Arguments
elementHTMLElement
The dropdown element
item
The menu item to be rendered
Returns
Menu
This Menu
rendererFunction
Gets the current item renderer function
Returns
functionrenderFunctionelementHTMLElementitemObject
The function that converts an item into html and attaches it to the element supplied. This function is not intended to be called externally but can be redefined to change how the menu is created.
Arguments
render
The function to use as the renderer
elementHTMLElement
The dropdown element
item
The menu item to be rendered
Functions
hx.menuoptionsObjectSelection
Creates a new Menu set up on a detached element, wrapped in a selection
Arguments
options
See the options object for constructing Menu
Returns
Selection
A selection containing an element with an Menu initialised on it
Classes
hx-menu
The class applied to the menu dropdown. Additional classes can be passed into the constructor to style the color. Also, if an extra class is not specified and the selector used when creating the menu has a similarly named class, it will be applied to the menu.
Extra Classes
hx-action
Styles the menu with action colors
hx-complement
Styles the menu with compliment colors
hx-contrast
Styles the menu with contrast colors
hx-info
Styles the menu to indicate that clicking it will lead to some form of documentation / information.
hx-negative
Adds menu styling indicative of failure, danger or something negative
hx-positive
Adds menu styling indicative of success, confirmation or something positive
hx-warning
Adds menu styling indicative of warning, to suggest the user should use caution