Menubar
데스크톱 애플리케이션 스타일의 수평 메뉴바 컴포넌트
개요
Menubar 컴포넌트는 base-ui의 Menubar와 Menu Primitive를 기반으로, 여러 개의 드롭다운 메뉴를 수평으로 나열한 메뉴바를 제공합니다. File, Edit, View 같은 애플리케이션 메뉴 구성에 활용합니다.
주요 특징
- ✅ 다중 메뉴: 여러 MenubarMenu를 수평으로 나열, 열린 상태에서 좌우 이동 지원
- ✅ 풍부한 아이템: 일반, 체크박스, 라디오, 서브메뉴 아이템 지원
- ✅ 단축키 표시: MenubarShortcut으로 키 조합 표기
- ✅ 라벨/구분선: MenubarLabel, MenubarSeparator로 메뉴 구조화
- ✅ Destructive 아이템:
variant="destructive"로 위험 동작 강조 - ✅ 접근성: base-ui 기반 키보드 내비게이션 및 ARIA 속성 자동 관리
사용 예시
기본 메뉴바
Preview
체크박스 아이템
토글 가능한 옵션을 메뉴에 포함합니다.
Preview
라디오 아이템
여러 옵션 중 하나만 선택하는 그룹을 구성합니다.
Preview
서브메뉴
MenubarSub로 계층형 메뉴를 구성합니다.
Preview
라벨과 Destructive 아이템
Preview
API Reference
Menubar Props
base-ui Menubar의 props를 전달합니다.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | 추가 CSS 클래스 |
MenubarMenu Props
base-ui Menu.Root의 props를 전달합니다.
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | - | 제어 모드의 열림 상태 |
defaultOpen | boolean | false | 비제어 모드의 초기 열림 상태 |
onOpenChange | (open: boolean) => void | - | 열림 상태 변경 콜백 |
MenubarContent Props
| Prop | Type | Default | Description |
|---|---|---|---|
align | "start" | "center" | "end" | "start" | 트리거 기준 정렬 |
alignOffset | number | -4 | 정렬 기준 오프셋(px) |
sideOffset | number | 8 | 트리거와의 거리(px) |
MenubarItem Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "destructive" | "default" | 아이템 스타일 |
inset | boolean | - | 좌측 들여쓰기 여부 |
disabled | boolean | - | 비활성화 |
className | string | - | 추가 CSS 클래스 |
MenubarCheckboxItem Props
| Prop | Type | Default | Description |
|---|---|---|---|
checked | boolean | - | 제어 모드 체크 상태 |
defaultChecked | boolean | - | 초기 체크 상태 |
onCheckedChange | (checked: boolean) => void | - | 체크 상태 변경 콜백 |
inset | boolean | - | 좌측 들여쓰기 여부 |
MenubarRadioGroup / MenubarRadioItem Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | - | 제어 모드 선택 값 |
defaultValue | string | - | 초기 선택 값 |
onValueChange | (value: string) => void | - | 선택 변경 콜백 |
MenubarRadioItem은 value(필수)와 inset props를 받습니다.
기본 사용법
import {
Menubar,
MenubarMenu,
MenubarTrigger,
MenubarContent,
MenubarItem,
} from "@vortex/ui-foundation"
;<Menubar>
<MenubarMenu>
<MenubarTrigger>File</MenubarTrigger>
<MenubarContent>
<MenubarItem>New</MenubarItem>
</MenubarContent>
</MenubarMenu>
</Menubar>접근성
- base-ui Menubar 기반으로
role="menubar",role="menu",role="menuitem"등이 자동 적용됩니다. - 방향키로 메뉴 간/메뉴 내 이동, Enter/Space로 선택, Escape로 닫기를 지원합니다.
- MenubarShortcut은 시각적 표시 전용이므로 실제 단축키 동작은 별도 구현이 필요합니다.
- ✅ MenubarLabel로 메뉴 섹션의 맥락을 제공하세요.
관련 컴포넌트
- DropdownMenu: 단일 트리거 드롭다운 메뉴
- Context Menu: 우클릭 컨텍스트 메뉴
- Kbd: 단축키 키캡 표시
Last updated on