Skip to content
Docs

@hua-labs/ui
v1.0.0

bash
npm install @hua-labs/hua
tsx
import { ContextMenu, ContextMenuItem, ContextMenuSeparator, ContextMenuLabel, ContextMenuGroup } from "@hua-labs/hua";

Project Files

trigger*React.ReactNode-docs:components.contextMenu.props.trigger
children*React.ReactNode-docs:components.contextMenu.props.children
openboolean-docs:components.contextMenu.props.open
onOpenChange(open: boolean) => void-docs:components.contextMenu.props.onOpenChange
disabledbooleanfalsedocs:components.contextMenu.props.disabled
placement"top" | "bottom" | "left" | "right"-Menu placement relative to trigger
align"start" | "center" | "end"-Menu alignment
offsetnumber-Offset from trigger (pixels)

PropTypeDefault
iconReact.ReactNode-docs:components.contextMenu.itemProps.icon
variant"default" | "destructive" | "disabled""default"docs:components.contextMenu.itemProps.variant
disabledbooleanfalsedocs:components.contextMenu.itemProps.disabled

docs:common.basicUsagetsx
1// Via framework (recommended)
2import { ContextMenu, ContextMenuItem, ContextMenuSeparator } from '@hua-labs/hua';
3// Or direct import
4// import { ContextMenu, ContextMenuItem, ContextMenuSeparator } from '@hua-labs/ui/interactive';
5 
6<ContextMenu
7  trigger={
8    <div className="p-4 border rounded-lg">
9      Right-click here
10    </div>
11  }
12>
13  <ContextMenuItem icon={<Copy />}>Copy</ContextMenuItem>
14  <ContextMenuItem icon={<Scissors />}>Cut</ContextMenuItem>
15  <ContextMenuItem icon={<ClipboardText />}>Paste</ContextMenuItem>
16  <ContextMenuSeparator />
17  <ContextMenuItem icon={<Trash />} variant="destructive">
18    Delete
19  </ContextMenuItem>
20</ContextMenu>
docs:components.contextMenu.examples.groupsAndLabelstsx
1<ContextMenu trigger={<div>Right-click</div>}>
2  <ContextMenuLabel>Edit</ContextMenuLabel>
3  <ContextMenuGroup>
4    <ContextMenuItem icon={<Copy />}>Copy</ContextMenuItem>
5    <ContextMenuItem icon={<Pencil />}>Rename</ContextMenuItem>
6  </ContextMenuGroup>
7  <ContextMenuSeparator />
8  <ContextMenuLabel>Actions</ContextMenuLabel>
9  <ContextMenuGroup>
10    <ContextMenuItem icon={<Download />}>Download</ContextMenuItem>
11    <ContextMenuItem icon={<Trash />} variant="destructive">
12      Delete
13    </ContextMenuItem>
14  </ContextMenuGroup>
15</ContextMenu>

  • • ContextMenuItem -
  • • ContextMenuSeparator -
  • • ContextMenuLabel -
  • • ContextMenuGroup -

  • •docs:components.contextMenu.accessibility.keyboard: docs:components.contextMenu.accessibility.keyboardDesc
  • •docs:components.contextMenu.accessibility.clickOutside: docs:components.contextMenu.accessibility.clickOutsideDesc
  • •docs:components.contextMenu.accessibility.viewportBoundary: docs:components.contextMenu.accessibility.viewportBoundaryDesc
MenuCommand