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.

Index

Constructors

• constructor

Properties

• shadowRootOptions
• styles
• disabled
• focusableSelector
• position
• preventCloseOnClickInside
• anchor

Accessors

• dropdownPositionalStyles
• focusableDropdownChildren

Methods

• toggleDropdown
• render

Constructors

ui.dropdown.DropdownMenu.constructor()

DropdownMenu(): DropdownMenu

Returns: DropdownMenu

Properties

ui.dropdown.DropdownMenu.shadowRootOptions

static

shadowRootOptions: { delegatesFocus: boolean }

Options used when calling attachShadow. Set this property to customize the options for the shadowRoot; for example, to create a closed shadowRoot: {mode: 'closed'}.

Note, these options are used in createRenderRoot. If this method is customized, options should be respected if possible.

ui.dropdown.DropdownMenu.styles

static

styles: CSSResult[]

Array of styles to apply to the element. The styles should be defined using the ? tag function, via constructible stylesheets, or imported from native CSS module scripts.

Note on Content Security Policy:

Element styles are implemented with <style> tags when the browser doesn’t support adopted StyleSheets. To use such <style> tags with the style-src CSP directive, the style-src value must either include ‘unsafe-inline’ or nonce-<base64-value> with <base64-value> replaced be a server-generated nonce.

To provide a nonce to use on generated <style> elements, set window.litNonce to a server-generated nonce in your page’s HTML, before loading application code:

<script>
  // Generated and unique per request:
  window.litNonce = 'a1b2c3d4';
</script>

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

ui.dropdown.DropdownMenu.render()

render(): unknown

Invoked on each update to perform rendering tasks. This method may return any value renderable by lit-html’s ChildPart - typically a TemplateResult. Setting properties inside this method will not trigger the element to update.

Returns: unknown