Menu - Form Widgets Documentation

Usage

Static Menu

A simple vertical menu list that is always visible.

HTML

<ul class="fw-menu">
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
</ul>

<script>FormWidgets.autoInit();</script>

Dropdown Menu

A popup menu triggered by clicking another element.

HTML + JS

<button id="menuBtn" class="btn">Open Menu</button>

<ul id="myDropdown">
  <li><a href="#">Profile</a></li>
  <li><a href="#">Settings</a></li>
</ul>

<script>
FormWidgets.init('#myDropdown', 'Menu', {
    type: 'dropdown',
    triggerElement: '#menuBtn',
    trigger: 'click'
});
</script>

Context Menu

A menu that appears on right-click.

JavaScript

FormWidgets.init('#contextMenu', 'Menu', {
    type: 'context',
    triggerElement: '#targetArea',
    trigger: 'contextmenu'
});

Options

Option	Type	Default	Description
type	string	'static'	Menu behavior type. Options: `'static'` (inline), `'dropdown'` (popup), `'context'` (mouse position).
trigger	string	'click'	Event that opens the menu. Options: `'click'`, `'hover'`, `'contextmenu'`.
triggerElement	string / Element	null	Selector or DOM element that triggers the menu opening. Required for dropdown and context types.

Data Attributes

Data Attribute	Equivalent Option	Example
data-type	`type`	`data-type="dropdown"`
data-trigger	`trigger`	`data-trigger="hover"`
data-trigger-element	`triggerElement`	`data-trigger-element="#btn"`

Nested Menus

To create nested submenus, simply place a <ul> inside an <li>. The widget automatically detects it, adds a chevron icon, and handles the hover/open behavior.

HTML

<ul class="fw-menu">
  <li>
    <a href="#">Parent Item</a>
    <ul> <!-- Submenu -->
      <li><a href="#">Child 1</a></li>
      <li><a href="#">Child 2</a></li>
    </ul>
  </li>
</ul>

Keyboard Navigation

EscCloses the menu and returns focus to the trigger element

Features

Versatile Types

Static, dropdown, and context menus from one widget.

Nested Menus

Unlimited levels of submenus with automatic positioning.

Context Menu

Right-click support with precise mouse positioning.

Accessible

Proper ARIA roles and keyboard support built-in.

Notes

Popup Positioning

When initialized as a dropdown or context menu, the widget moves the <ul> element to the end of the <body> tag. This ensures it isn't clipped by overflow: hidden on any parent containers.