Skip to content
Docs
컴포넌트로 돌아가기

Menu

@hua-labs/ui
v1.1.0

수평, 수직, 컴팩트 변형을 지원하는 유연한 네비게이션 메뉴 컴포넌트입니다.

설치

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

@hua-labs/ui의 UI 컴포넌트를 @hua-labs/hua에서 통합 제공합니다.

UI 컴포넌트, 모션 훅, i18n을 하나의 패키지로 사용할 수 있습니다.

라이브 데모

기본 (수직)

수평 메뉴

라벨 그룹

메인
기타

활성 상태

컴팩트 변형

비활성화 항목

Props

이름타입기본값설명
children*React.ReactNode-MenuItem, MenuSeparator, MenuLabel 컴포넌트들
variant"default" | "horizontal" | "vertical" | "compact""default"메뉴 방향 및 스타일
size"sm" | "md" | "lg""md"메뉴 아이템 크기

MenuItem Props

Props

이름타입기본값설명
iconReact.ReactNode-아이콘 요소
activebooleanfalse활성화/선택 상태
disabledbooleanfalse비활성화 상태

코드 예시

기본 사용법tsx
1// Via framework (recommended)
2import { Menu, MenuItem, MenuSeparator } from '@hua-labs/ui/interactive';
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>
수평 메뉴tsx
1<Menu variant="horizontal">
2  <MenuItem>Products</MenuItem>
3  <MenuItem>Pricing</MenuItem>
4  <MenuItem>About</MenuItem>
5  <MenuItem>Contact</MenuItem>
6</Menu>
라벨 그룹tsx
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>
활성 상태tsx
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 - 컴팩트 메뉴 단축 컴포넌트

접근성

  • •키보드 탐색: Tab 키로 항목 포커스 가능
  • •비활성화 상태: 비활성화된 항목 적절히 처리
  • •포커스 인디케이터: 명확한 시각적 포커스 표시