DropdownMenu
-
class
ui.dropdown.DropdownMenu() A customizable dropdown menu component with flexible positioning and keyboard navigation.
Provides a trigger element that opens a floating panel with menu content, supporting various positioning options and accessibility features.
Constructors
-
ui.dropdown.DropdownMenu.constructor() - DropdownMenu():
DropdownMenuReturns:
DropdownMenu
Properties
-
ui.dropdown.DropdownMenu.disabled - disabled: boolean
Whether the dropdown is disabled and non-interactive.
-
ui.dropdown.DropdownMenu.focusableSelector - focusableSelector: string
CSS selector for elements that should be focusable within the dropdown.
By default this includes <a>, <button>, <input>, <textarea>, <select>, <details> elements, as well as elements with a non-negative tabindex attribute. CSS selector for elements that should be focusable within the dropdown.
-
ui.dropdown.DropdownMenu.position - position: (“left” | “right” | “top” | “bottom”)
Position of the dropdown relative to the trigger element.
-
ui.dropdown.DropdownMenu.preventCloseOnClickInside - preventCloseOnClickInside: boolean
Prevents the dropdown from closing when clicking inside the dropdown panel.
-
ui.dropdown.DropdownMenu.anchor optional
anchor: (“left” | “right” | “top” | “bottom”)Anchor point for dropdown alignment relative to the trigger element.
Accessors
-
ui.dropdown.DropdownMenu.dropdownPositionalStyles() - get dropdownPositionalStyles(): StyleInfo
Returns the positional styles for a dropdown based on the current position. The styles include properties such as ‘left’, ‘right’, ‘top’, ‘bottom’ and ‘margin’.
Returns: StyleInfo
Object representing the positional styles for the dropdown
-
ui.dropdown.DropdownMenu.focusableDropdownChildren() - get focusableDropdownChildren(): (undefined | NodeListOf)
Retrieves the focusable children within the dropdown slot element.
Returns: (undefined | NodeListOf)
A list of HTMLElements representing the focusable children
Methods
-
ui.dropdown.DropdownMenu.toggleDropdown() - toggleDropdown(event: PointerEvent): Promise
Toggles the dropdown menu visibility based on the current state.
Parameters
event: PointerEvent
The pointer event triggering the dropdown toggle.Returns: Promise
