Docs
Components
Dropdowns

Dropdowns

Key Features

  1. Accessibility:
    • DropdownTrigger uses aria-expanded and aria-haspopup for better accessibility.
    • DropdownContent uses role="menu" for proper semantics.
  2. Click Outside Handling:
    • The useClickOutside hook ensures that clicking outside the dropdown closes it automatically.
  3. Keyboard Support:
    • Escape key closes the dropdown.

This component is flexible for various dropdown-based UI designs!

Examples

breadcrumb

Props

Dropdown

PropTypeDescriptionRequired
childrenReact.ReactNodeThe content of the dropdown, typically DropdownTrigger and DropdownContent components.Yes
isOpenbooleanControls whether the dropdown is open or closed.Yes
setIsOpenSetStateActionType<boolean>A function to update the isOpen state.Yes

DropdownTrigger

PropTypeDescriptionRequired
childrenReact.ReactNodeThe content of the trigger, typically a button or clickable element.Yes
classNamestringAdditional CSS class names for the trigger.No

DropdownContent

PropTypeDescriptionRequired
alignstart, end, centerSpecifies the alignment of the dropdown relative to the trigger (start, end, or center).No (default: center)
classNamestringAdditional CSS class names for the dropdown content container.No
childrenReact.ReactNodeThe content inside the dropdown (e.g., menu items).Yes