컴포넌트
Menu Bar
데스크탑 앱 스타일 상단 메뉴바. 각 메뉴 클릭 시 드롭다운이 스태거 페이드로 펼쳐지고, 좌우 화살표로 메뉴 간 이동·위아래 화살표로 항목 이동(비활성 자동 건너뜀), ESC로 닫힌다. WAI-ARIA menubar 패턴과 roving tabindex로 완전한 키보드 접근성을 제공한다.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/MenuBar-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| menus | MenuBarMenu[] | DEFAULT_MENUS (파일/편집/보기/도움말) | 표시할 메뉴 목록. 각 메뉴는 label과 actions(항목 배열)를 가지며, 미지정 시 기본 데이터 사용. |
| onSelect | (menu: MenuBarMenu, action: MenuBarAction, menuIndex: number, actionIndex: number) => void | undefined | 드롭다운 항목 선택 시 콜백. 선택된 메뉴/액션과 각 인덱스를 전달. |
| accentColor | string | "#C084FC" | 호버·포커스·보더 강조 색상. 기본값은 Vivid Kit 바이올렛. |
| stagger | number | 30 | 드롭다운 항목 스태거 진입 지연(ms). reduced-motion 시 0. |
| duration | number | 160 | 개별 항목 페이드 전환 지속(ms). reduced-motion 시 0. |
| className | string | undefined | 루트 컨테이너에 적용할 추가 클래스. |