.. role:: clio-optional
   :class: clio-flag clio-flag-optional


############
DropdownMenu
############

.. js: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.
   
   .. rubric:: Examples
   
   
   .. code-block:: html
   
      <hoops-dropdown position="bottom" anchor="left">
        <button>Menu</button>
        <div slot="dropdown-popup">
          <button>Option 1</button>
          <button>Option 2</button>
        </div>
      </hoops-dropdown>
   
   .. rubric:: Custom Element
   
   
   ``hoops-dropdown``
   
   .. rubric:: 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
   
   
   .. rubric:: Slots
   
   
   **- Default slot for the dropdown trigger element (button, icon, etc.)**
   
   **dropdown-popup**
   
   
      Content to display in the dropdown panel
   
   
   .. rubric:: Events
   
   
   **hoops-dropdown-opened**
   
   
      Emitted when the dropdown is opened
   
   
   **hoops-dropdown-closed**
   
   
      Emitted when the dropdown is closed
   
   
   .. rubric:: 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
   
   
   .. rubric:: Since
   
   
   ``2025.7.0``
   
   
   Index
   =====
   
   .. rubric:: Constructors
   
   
   .. rst-class:: api-xref-list
   
   
   * :js:func:`~ui.dropdown.DropdownMenu.constructor`
   
   .. rubric:: Properties
   
   
   .. rst-class:: api-xref-list
   
   
   * :js:data:`~ui.dropdown.DropdownMenu.disabled`
   * :js:data:`~ui.dropdown.DropdownMenu.focusableSelector`
   * :js:data:`~ui.dropdown.DropdownMenu.position`
   * :js:data:`~ui.dropdown.DropdownMenu.preventCloseOnClickInside`
   * :js:data:`~ui.dropdown.DropdownMenu.anchor`
   
   .. rubric:: Accessors
   
   
   .. rst-class:: api-xref-list
   
   
   * :js:func:`~ui.dropdown.DropdownMenu.dropdownPositionalStyles`
   * :js:func:`~ui.dropdown.DropdownMenu.focusableDropdownChildren`
   
   .. rubric:: Methods
   
   
   .. rst-class:: api-xref-list
   
   
   * :js:meth:`~ui.dropdown.DropdownMenu.toggleDropdown`
   
   



.. rst-class:: kind-group kind-constructors

.. rubric:: Constructors
   :class: kind-group-title


.. js:method:: ui.dropdown.DropdownMenu.constructor

      .. rst-class:: sig-pretty-signature
      
         | DropdownMenu(): :js:class:`DropdownMenu <ui.dropdown.DropdownMenu>`
      
      **Returns**\ : :js:class:`DropdownMenu <ui.dropdown.DropdownMenu>`
      



.. rst-class:: kind-group kind-properties

.. rubric:: Properties
   :class: kind-group-title


.. js:data:: ui.dropdown.DropdownMenu.disabled

      .. rst-class:: sig-pretty-signature
      
         | disabled: *boolean*
      
      Whether the dropdown is disabled and non-interactive.
      
      .. rubric:: Default
      
      
      `````ts
      false
      `````
      



.. js:data:: ui.dropdown.DropdownMenu.focusableSelector

      .. rst-class:: sig-pretty-signature
      
         | 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.
      
      .. rubric:: Default
      
      
      `````ts
      'a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])'
      `````
      



.. js:data:: ui.dropdown.DropdownMenu.position

      .. rst-class:: sig-pretty-signature
      
         | position: (*"left"* | *"right"* | *"top"* | *"bottom"*\ )
      
      Position of the dropdown relative to the trigger element.
      
      .. rubric:: Default
      
      
      `````ts
      'bottom'
      `````
      



.. js:data:: ui.dropdown.DropdownMenu.preventCloseOnClickInside

      .. rst-class:: sig-pretty-signature
      
         | preventCloseOnClickInside: *boolean*
      
      Prevents the dropdown from closing when clicking inside the dropdown panel.
      
      .. rubric:: Default
      
      
      `````ts
      false
      `````
      



.. js:data:: ui.dropdown.DropdownMenu.anchor

      .. rst-class:: clio-flags
      
         :clio-optional:`optional`
      
      .. rst-class:: sig-pretty-signature
      
         | anchor: (*"left"* | *"right"* | *"top"* | *"bottom"*\ )
      
      Anchor point for dropdown alignment relative to the trigger element.
      
      .. rubric:: Default
      
      
      `````ts
      undefined
      `````
      



.. rst-class:: kind-group kind-accessors

.. rubric:: Accessors
   :class: kind-group-title


.. js:method:: ui.dropdown.DropdownMenu.dropdownPositionalStyles

      .. rst-class:: sig-pretty-signature
      
         | *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
      
      



.. js:method:: ui.dropdown.DropdownMenu.focusableDropdownChildren

      .. rst-class:: sig-pretty-signature
      
         | *get* focusableDropdownChildren(): (*undefined* | *NodeListOf*\ )
      
      Retrieves the focusable children within the dropdown slot element.
      
      **Returns**\ : (*undefined* \| *NodeListOf*\ )
      
      
         A list of HTMLElements representing the focusable children
      
      



.. rst-class:: kind-group kind-methods

.. rubric:: Methods
   :class: kind-group-title


.. js:method:: ui.dropdown.DropdownMenu.toggleDropdown

      .. rst-class:: sig-pretty-signature
      
         | 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*
      
      
      




