메뉴바

메뉴바 (Menubar)

메뉴바는 데스크톱 애플리케이션에서 흔히 볼 수 있는, 시각적으로 지속되는 메뉴예요. 일관된 명령 집합에 빠르게 접근할 수 있게 해주죠. 파일·편집·보기 같은 상단 메뉴를 만들 때 딱 맞아요.

출처: 문서

본문

설치하기

CLI Manual 
npx shadcn@latest add menubar

다음 의존성을 설치해 주세요.

npm install @radix-ui/react-menubar

다음 코드를 프로젝트에 복사해서 붙여넣어 주세요.

import 경로를 프로젝트 설정에 맞게 바꿔 주세요.

사용하기

import {
  Menubar,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarSeparator,
  MenubarShortcut,
  MenubarTrigger,
} from "@/components/ui/menubar"

<Menubar>
  <MenubarMenu>
    <MenubarTrigger>File</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>
        New Tab <MenubarShortcut>⌘T</MenubarShortcut>
      </MenubarItem>
      <MenubarItem>New Window</MenubarItem>
      <MenubarSeparator />
      <MenubarItem>Share</MenubarItem>
      <MenubarSeparator />
      <MenubarItem>Print</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

더 알아보기 (Learn more)

  • Radix UI Menubar — 메뉴바의 기반이 되는 Radix UI 프리미티브 문서예요.