Constructor
// Manual initialization
window.lnDropdown(document.body);Overview & Philosophy
ln-dropdown is applied to a container via <div data-ln-dropdown> enclosing a trigger button and a <ul data-ln-toggle> menu. When the menu emits ln-toggle:open, it promotes the menu to the browser's top layer using the native Popover API (popover="manual") and computes floating alignment coordinates to avoid clipping from parent containers. On outside clicks or pressing Escape, it writes data-ln-toggle="close" back to the menu attribute, maintaining strict separation between binary state and top-layer positioning.
In ln-ashlar, ln-dropdown is a coordinator wrapper that layers menu-grade behavior on top of a standard ln-toggle instance with full keyboard roving navigation and boundary collision avoidance.
The Dropdown Doctrine
A dropdown does not own its state. The open/closed state lives entirely in the data-ln-toggle attribute of the inner menu. Click-outside rules, Escape keypresses, and resize handlers close the menu simply by writing data-ln-toggle="close" back to the menu. The observer on the toggle runs the close pipeline, which the dropdown coordinates. The HTML attribute is the sole contract.
Top-Layer Promotion & Positioning
When a dropdown menu is activated, ln-dropdown promotes the menu element to the top layer using the native Popover API (popover="manual", showPopover()) to prevent clipping under scrollable containers or nested cards. It then measures the trigger element and matches its position right-aligned below the trigger (or according to data-ln-dropdown-position). It automatically flips above if vertical space is restricted, and removes positioning styles when closed.
For the complete developer reference, see the ln-dropdown README and the architecture reference.
Basics
| Attribute | On element | Description |
|---|---|---|
data-ln-dropdown | wrapper | Creates a dropdown coordinator instance |
data-ln-dropdown-position | wrapper | Target placement (e.g. "bottom-start", "bottom-end", default: "bottom-end") |
data-ln-dropdown-placement | menu (auto) | Computed winning placement for CSS styling hooks |
data-ln-toggle | menu | The toggle target (menu element) |
data-ln-toggle-for | button | Trigger button, references menu by ID |
Example 1 — Basic Dropdown (with ARIA Keyboard Navigation)
Click the button or press ArrowDown on it to open. Use ArrowDown, ArrowUp, Home, and End to navigate through the menu items. Press Escape to close and return focus to the trigger.
Example 2 — Configurable Placement
Use data-ln-dropdown-position to specify the desired alignment (e.g. bottom-start for left-aligned buttons).
API & Events
Events
| Event | Bubbles | Detail |
|---|---|---|
ln-dropdown:open | yes | { target } |
ln-dropdown:close | yes | { target } |
Open/close state is managed by ln-toggle. Use ln-toggle:before-open / ln-toggle:before-close to cancel.
Dependencies
Dropdown depends on ln-toggle. ln-toggle must be loaded before dropdown.
<script src="dist/ln-ashlar.iife.js"></script>