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.

Examples

<hoops-dropdown position="bottom" anchor="left">
  <button>Menu</button>
  <div slot="dropdown-popup">
    <button>Option 1</button>
    <button>Option 2</button>
  </div>
</hoops-dropdown>

Custom Element

hoops-dropdown

Attributes

preventCloseOnClickInside

Prevents closing when clicking inside dropdown

position

Position of dropdown relative to trigger

anchor

Anchor point for dropdown alignment

focusableSelector

CSS selector for focusable elements

disabled

Whether the dropdown is disabled

Slots

- Default slot for the dropdown trigger element (button, icon, etc.)

dropdown-popup

Content to display in the dropdown panel

Events

hoops-dropdown-opened

Emitted when the dropdown is opened

hoops-dropdown-closed

Emitted when the dropdown is closed

CSS Properties

–hoops-dropdown-z-index

Z-index for the dropdown panel

–hoops-dropdown-background-color

Background color of the dropdown panel

–hoops-dropdown-menu-border-color

Border color of the dropdown panel

–hoops-dropdown-menu-radius

Border radius of the dropdown panel

–hoops-dropdown-menu-border-size

Border width of the dropdown panel

–hoops-dropdown-menu-border-style

Border style of the dropdown panel

–hoops-dropdown-box-shadow

Box shadow for the dropdown panel

–hoops-dropdown-gap

Gap between trigger and dropdown panel

Since

2025.7.0

Index

Constructors

• constructor

Properties

• disabled
• focusableSelector
• position
• preventCloseOnClickInside
• anchor

Accessors

• dropdownPositionalStyles
• focusableDropdownChildren

Methods

• toggleDropdown

Constructors

ui.dropdown.DropdownMenu.constructor()

DropdownMenu(): DropdownMenu

Returns: DropdownMenu

Properties

ui.dropdown.DropdownMenu.disabled

disabled: boolean

Whether the dropdown is disabled and non-interactive.

Default

```ts false ```

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.

Default

```ts 'a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])' ```

ui.dropdown.DropdownMenu.position

position: (“left” | “right” | “top” | “bottom”)

Position of the dropdown relative to the trigger element.

Default

```ts 'bottom' ```

ui.dropdown.DropdownMenu.preventCloseOnClickInside

preventCloseOnClickInside: boolean

Prevents the dropdown from closing when clicking inside the dropdown panel.

Default

```ts false ```

ui.dropdown.DropdownMenu.anchor

optional

anchor: (“left” | “right” | “top” | “bottom”)

Anchor point for dropdown alignment relative to the trigger element.

Default

```ts undefined ```

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