<hx-menu> v0.2.0+

The custom <hx-menu> element defines a list of choices to the user, such as a list of actions or functions.

Permitted Parents: any
Permitted Children: either of the following:

zero or more <hx-menuitem> elements

zero or more <section> elements
Events: Any of the following:

close

open

reposition

Attributes

Attributes enable declarative configuration of an element, via HTML markup.

open (optional): Opens the menu
position (optional): Positions the menu
relative-to (optional): ID of an element that the menu is positioned relative to. If not set, the menu will be positioned relative to the element with the aria-controls attribute matching the menu ID.

Properties

JavaScript properties enable programmatic access to an element's configuration and state.

controlElement {HTMLElement} read-only

Returns the first HTML element whose aria-controls attribute matches the ID of the <hx-menu>.

The control element is used to attach various DOM event listeners, in order to determine when to show or hide the <hx-menu>.

open {Boolean [false]}

Indicates whether or not the <hx-menu> should be displayed.

optimumPosition {String|undefined}

Optimum position determined by internal positioning algorithm.

It will return undefined if <hx-menu> hasn't been repositioned.

position {String [bottom-start]}

Configures the position of the <hx-menu>, in relation to its relative element.

Reflects the position attribute.

relativeElement {HTMLElement} read-only

HTML element used as a point of reference for calculating the fixed position of the <hx-menu>.

If the relative-to attribute is defined, this will return the first element whose ID matches the relativeTo property. Otherwise, it will return the value of controlElement.

relativeTo {String}

A string corresponding to the ID of the relative element.

Reflects the relative-to attribute.

See Also