Skip to content
Docs

@hua-labs/ui
v1.1.0

bash
npm install @hua-labs/hua
tsx
import { Dropdown, DropdownItem, DropdownSeparator, DropdownLabel } from "@hua-labs/hua";

trigger*React.ReactNode-docs:components.dropdown.props.trigger
children*React.ReactNode-docs:components.dropdown.props.children
openboolean-docs:components.dropdown.props.open
onOpenChange(open: boolean) => void-docs:components.dropdown.props.onOpenChange
placement"top" | "bottom" | "left" | "right""bottom"docs:components.dropdown.props.placement
align"start" | "center" | "end""start"docs:components.dropdown.props.align
offsetnumber8docs:components.dropdown.props.offset
disabledbooleanfalsedocs:components.dropdown.props.disabled
showArrowbooleantruedocs:components.dropdown.props.showArrow

docs:common.basicUsagetsx
1// Via framework (recommended)
2import { Dropdown, DropdownItem, Button } from '@hua-labs/hua';
3// Or direct import
4// import { Dropdown, DropdownItem } from '@hua-labs/ui/overlay';
5 
6<Dropdown trigger={<Button>Menu</Button>}>
7  <DropdownItem onClick={() => console.log('Profile')}>
8    Profile
9  </DropdownItem>
10  <DropdownItem onClick={() => console.log('Settings')}>
11    Settings
12  </DropdownItem>
13</Dropdown>
docs:components.dropdown.codeExamples.withIconsAndSeparatortsx
1<Dropdown trigger={<Button variant="ghost"><DotsThree /></Button>}>
2  <DropdownItem icon={<Pencil />}>Edit</DropdownItem>
3  <DropdownItem icon={<Copy />}>Duplicate</DropdownItem>
4  <DropdownSeparator />
5  <DropdownItem icon={<Trash />} variant="destructive">
6    Delete
7  </DropdownItem>
8</Dropdown>
docs:components.dropdown.codeExamples.withLabelstsx
1<Dropdown trigger={<Button>Actions</Button>}>
2  <DropdownLabel>Account</DropdownLabel>
3  <DropdownItem icon={<User />}>Profile</DropdownItem>
4  <DropdownItem icon={<Gear />}>Settings</DropdownItem>
5  <DropdownSeparator />
6  <DropdownItem icon={<SignOut />} variant="destructive">
7    Sign out
8  </DropdownItem>
9</Dropdown>
docs:components.dropdown.codeExamples.placementOptionstsx
1<Dropdown trigger={<Button>Top</Button>} placement="top">
2  <DropdownItem>Item 1</DropdownItem>
3  <DropdownItem>Item 2</DropdownItem>
4</Dropdown>
5 
6<Dropdown trigger={<Button>Right</Button>} placement="right">
7  <DropdownItem>Item 1</DropdownItem>
8  <DropdownItem>Item 2</DropdownItem>
9</Dropdown>

  • DropdownItem -
  • DropdownSeparator -
  • DropdownLabel -
  • DropdownMenu -
  • DropdownGroup -

  • • default -
  • • destructive -
  • • disabled -

  • •docs:components.dropdown.accessibility.outsideClick: docs:components.dropdown.accessibility.outsideClickDesc
  • •docs:components.dropdown.accessibility.viewportDetection: docs:components.dropdown.accessibility.viewportDetectionDesc
  • •docs:common.accessibility.focusManagement: docs:components.dropdown.accessibility.focusManagementDesc
PopoverDrawer