탐색과 공개@neumorphism-ui/menubar

Menubar

Menubar는 포커스 이동을, 기존 Dropdown Menu 부품은 팝업·선택 동작을 담당합니다.

@neumorphism-ui/menubar

Registry JSON

미리보기

준비됨

설치

npx shadcn@latest add @neumorphism-ui/menubar

CLI가 npm 의존성, base 토큰, utils와 컴포넌트 소스를 순서대로 확인하고 설치합니다.

Registry를 처음 사용한다면 namespace 설정 을 먼저 완료하세요.

사용법

Import

"use client";
import * as React from "react";
import { Menubar, MenubarMenu, MenubarTrigger, MenubarContent, MenubarItem, MenubarCheckboxItem } from "@/components/ui/menubar";

Example

export default function Example() {
  const [visible, setVisible] = React.useState(true);
  const [message, setMessage] = React.useState("준비됨");
  return <div><Menubar aria-label="파일"><MenubarMenu><MenubarTrigger>파일</MenubarTrigger><MenubarContent><MenubarItem onClick={() => setMessage("문서를 만들었습니다")}>새 문서</MenubarItem></MenubarContent></MenubarMenu><MenubarMenu><MenubarTrigger>보기</MenubarTrigger><MenubarContent><MenubarCheckboxItem checked={visible} onCheckedChange={setVisible}>상태 표시</MenubarCheckboxItem></MenubarContent></MenubarMenu></Menubar>{visible && <p role="status">{message}</p>}</div>;
}

API 레퍼런스

컴포넌트	속성	타입	기본값	설명
`Menubar`	`orientation`	`"horizontal" \| "vertical"`	`—`	키보드 이동 방향을 지정합니다.
`MenubarTrigger`	`disabled`	`boolean`	`—`	메뉴 트리거를 비활성화합니다.
`MenubarCheckboxItem`	`checked / onCheckedChange`	`boolean / (checked: boolean) => void`	`—`	체크 항목의 제어 상태입니다.

미리보기

설치

사용법

Import

Example

API 레퍼런스

접근성