Menubar

데스크톱 앱에서 자주 쓰이는, 명령 모음에 빠르게 접근할 수 있는 고정형 메뉴입니다.

examples/krds/menubar-demo.tsx

import {
  Menubar,
  MenubarCheckboxItem,

설치

pnpm dlx shadcn@latest add https://krdscn.gwlee.kr/r/menubar.json

사용법

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

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

구성

다음 조합으로 Menubar:

Menubar
├── MenubarMenu
│   ├── MenubarTrigger
│   └── MenubarContent
│       ├── MenubarGroup
│       │   ├── MenubarLabel
│       │   ├── MenubarItem
│       │   └── MenubarItem
│       ├── MenubarSeparator
│       ├── MenubarGroup
│       │   ├── MenubarLabel
│       │   ├── MenubarCheckboxItem
│       │   └── MenubarCheckboxItem
│       ├── MenubarSeparator
│       ├── MenubarGroup
│       │   ├── MenubarLabel
│       │   └── MenubarRadioGroup
│       │       ├── MenubarRadioItem
│       │       └── MenubarRadioItem
│       └── MenubarSub
│           ├── MenubarSubTrigger
│           └── MenubarSubContent
│               └── MenubarGroup
│                   ├── MenubarLabel
│                   ├── MenubarItem
│                   └── MenubarItem
└── MenubarMenu
    ├── MenubarTrigger
    └── MenubarContent
        └── MenubarGroup
            ├── MenubarLabel
            ├── MenubarItem
            └── MenubarItem

예제

Checkbox

Use MenubarCheckboxItem for toggleable options.

examples/krds/menubar-checkbox.tsx

import {
  Menubar,
  MenubarCheckboxItem,

Radio

Use MenubarRadioGroup and MenubarRadioItem for single-select options.

examples/krds/menubar-radio.tsx

"use client"

import * as React from "react"

Submenu

Use MenubarSub, MenubarSubTrigger, and MenubarSubContent for nested menus.

examples/krds/menubar-submenu.tsx

import {
  Menubar,
  MenubarContent,

With Icons

examples/krds/menubar-icons.tsx

import {
  FileIcon,
  FolderIcon,

RTL

RTL 지원을 활성화하려면 RTL 설정 가이드를 참고하세요.

examples/krds/menubar-rtl.tsx

"use client"

import * as React from "react"

API 참조

Radix UI Menubar 문서를 참고하세요.

Label Native Select