Skip to content
Docs

@hua-labs/ui
v1.1.0

bash
npm install @hua-labs/hua
tsx
import { Menu, MenuItem, MenuSeparator, MenuLabel } from "@hua-labs/hua";

children*React.ReactNode-docs:components.menu.props.children
variant"default" | "horizontal" | "vertical" | "compact""default"docs:components.menu.props.variant
size"sm" | "md" | "lg""md"docs:components.menu.props.size

MenuItem Props

iconReact.ReactNode-docs:components.menu.menuItemProps.icon
activebooleanfalsedocs:components.menu.menuItemProps.active
disabledbooleanfalsedocs:components.menu.menuItemProps.disabled

docs:common.basicUsagetsx
1// Via framework (recommended)
2import { Menu, MenuItem, MenuSeparator } from '@hua-labs/hua';
3// Or direct import
4// import { Menu, MenuItem, MenuSeparator } from '@hua-labs/ui/interactive';
5 
6<Menu>
7  <MenuItem icon={<House />}>Home</MenuItem>
8  <MenuItem icon={<User />}>Profile</MenuItem>
9  <MenuItem icon={<Gear />}>Settings</MenuItem>
10  <MenuSeparator />
11  <MenuItem icon={<SignOut />}>Sign out</MenuItem>
12</Menu>
docs:components.menu.examples.horizontaltsx
1<Menu variant="horizontal">
2  <MenuItem>Products</MenuItem>
3  <MenuItem>Pricing</MenuItem>
4  <MenuItem>About</MenuItem>
5  <MenuItem>Contact</MenuItem>
6</Menu>
docs:components.menu.examples.withLabelstsx
1<Menu>
2  <MenuLabel>Main</MenuLabel>
3  <MenuItem icon={<House />}>Home</MenuItem>
4  <MenuItem icon={<File />}>Documents</MenuItem>
5  <MenuSeparator />
6  <MenuLabel>Account</MenuLabel>
7  <MenuItem icon={<User />}>Profile</MenuItem>
8  <MenuItem icon={<Gear />}>Settings</MenuItem>
9</Menu>
docs:components.menu.examples.activeStatetsx
1<Menu>
2  <MenuItem icon={<House />} active>Home</MenuItem>
3  <MenuItem icon={<File />}>Documents</MenuItem>
4  <MenuItem icon={<Gear />}>Settings</MenuItem>
5</Menu>

  • MenuItem -
  • MenuSeparator -
  • MenuLabel -

  • MenuHorizontal -
  • MenuVertical -
  • MenuCompact -

  • •docs:components.menu.accessibility.keyboard: docs:components.menu.accessibility.keyboardDesc
  • •docs:components.menu.accessibility.disabled: docs:components.menu.accessibility.disabledDesc
  • •docs:components.menu.accessibility.focus: docs:components.menu.accessibility.focusDesc
ToastContextMenu