Menubar

Betav1.0.0

데스크탑 앱 스타일의 가로 메뉴바.

Loading…

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

<Menubar>
  <MenubarMenu>
    <MenubarTrigger>File</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>
        New Tab <MenubarShortcut>⌘T</MenubarShortcut>
      </MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

Installation

pnpm dlx @groudit/cli@latest add menubar

Composition

Menubar
└── MenubarMenu
    ├── MenubarTrigger
    └── MenubarContent
        ├── MenubarItem (+ Shortcut)
        ├── MenubarCheckboxItem
        ├── MenubarRadioGroup
        │   └── MenubarRadioItem
        ├── MenubarSub
        │   ├── MenubarSubTrigger
        │   └── MenubarSubContent
        └── MenubarSeparator

Dependencies

설치 시 자동으로 함께 들어오는 의존성. 모든 버전은 정확히 고정되어 자동 업데이트를 방지합니다.

npm packages

Package	Version
@base-ui/react	`1.5.0`
clsx	`2.1.1`
tailwind-merge	`3.6.0`
lucide-react	`1.17.0`

Groudit components

이 컴포넌트가 의존하는 다른 Groudit 컴포넌트 — 함께 설치됩니다.

utils

Accessibility

이 컴포넌트는 WAI-ARIA menubar 패턴을 따릅니다.

Keyboard interactions

Key	Description
`←→`	최상위 메뉴 간 이동.
`Enter↓`	메뉴 열기.
`↑↓`	메뉴 항목 이동.
`Esc`	메뉴 닫기.

WCAG 2.1 AA

이 컴포넌트는 다음 Success Criteria 충족을 목표로 합니다.

1.3.1 2.1.1 4.1.2