Dropdown

A component that displays a dropdown menu with customizable positioning and animation.

Installation

import { Dropdown } from 'uxp/components';

Signature

const Dropdown: React.ForwardRefExoticComponent<React.RefAttributes<DropdownHandlers> & DropdownProps>

Examples

<Dropdown
  trigger={<button>Click me</button>}
  content={<div>Dropdown content</div>}
/>

<Dropdown
  trigger={<button>Menu</button>}
  content={
    <div>
      <div>Option 1</div>
      <div>Option 2</div>
    </div>
  }
  position="top-right"
  duration={300}
  isOpen={true}
  onToggle={() => console.log('Dropdown toggled')}
  showAnchor={true}
  className="custom-dropdown"
/>

Properties

Name	Type	Mandatory	Default Value	Example Value
content	ReactNode	Yes	-	-
trigger	ReactNode	Yes	-	-
triggerElementRef	React.MutableRefObject	No	-	-
className	string	No	-	-
position	DropdownPosition	No	-	-
duration	number	No	-	-
isOpen	boolean	No	-	-
preventOpening	boolean	No	-	-
onToggle	() => void	No	-	-
showAnchor	boolean	No	-	-

Ref Handlers

Available methods through ref:

Method	Type	Description
open	() => void	Opens the dropdown.
close	() => void	Closes the dropdown.

Related Types

• DropdownProps

• DropdownPosition

• DropdownHandlers