Menubar

데스크톱 애플리케이션 스타일의 메뉴바 컴포넌트입니다. File, Edit, View와 같은 여러 메뉴를 포함하며, 키보드 탐색과 단축키를 지원합니다.

설치

Terminal

npx @msub-core/ui-cli add menubar

사용법

TSX

import {
  Menubar,
  MenubarMenu,
  MenubarTrigger,
  MenubarContent,
  MenubarItem,
} from "@msub-core/ui/components/menubar"

function MyComponent() {
  return (
    <Menubar>
      <MenubarMenu>
        <MenubarTrigger>File</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>New File</MenubarItem>
          <MenubarItem>Open...</MenubarItem>
          <MenubarItem>Save</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>Edit</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>Cut</MenubarItem>
          <MenubarItem>Copy</MenubarItem>
          <MenubarItem>Paste</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
    </Menubar>
  )
}

기본

Prop	Type	Default	Required	Description
className	string	-	No	추가 CSS 클래스

MenubarItem Props

Prop	Type	Default	Required	Description
shortcut	string	-	No	단축키 표시 (예: ⌘C, Ctrl+V)
disabled	boolean	false	No	비활성화 상태
variant	'default' \| 'destructive'	'default'	No	스타일 변형
closeOnSelect	boolean	true	No	클릭 시 메뉴 닫기

키보드 단축키

단축키는 시각적 표시만 제공합니다. 실제 키보드 이벤트는 별도로 구현해야 합니다.

아이콘과 함께

체크박스 아이템

Toolbar: 표시됨

Status Bar: 표시됨

Line Numbers: 표시됨

라디오 그룹

선택된 뷰: 그리드

중첩 메뉴

구분선과 라벨

비활성화 아이템

위험 액션

텍스트 에디터 예제

이미지 에디터 예제

줌 레벨: 100%

테마: 라이트 모드