Neumorphism UI

Menubar

파일, 보기처럼 항상 보이는 이름 아래 앱 명령을 묶을 때 사용합니다.

미리보기

파일과 보기 메뉴

파일 메뉴에서 로컬 문서 생성 안내를 표시하고 보기 메뉴의 체크 항목으로 표시 여부를 전환합니다.

미리보기를 불러오는 중입니다.

설치

Registry를 처음 사용한다면 기본 설정과 공통 스타일 설치 을 먼저 완료하세요.

npx shadcn@latest add @neumorphism-ui/menubar

공통 base를 한 번 설치한 뒤 CLI로 필요한 컴포넌트와 의존성을 추가합니다.

Registry JSON

사용법

이름이 있는 Menubar 안에 트리거와 콘텐츠를 가진 MenubarMenu를 두세요. 일반 항목은 명령에, 체크 항목은 유지되는 앱 설정에 연결합니다.

"use client";

import { useState } from "react";
import { Menubar, MenubarCheckboxItem, MenubarContent, MenubarMenu, MenubarTrigger } from "@/components/ui/menubar";

export default function Example() {
  const [visible, setVisible] = useState(true);
  return (
    <div>
      <Menubar aria-label="Document menu">
        <MenubarMenu>
          <MenubarTrigger>View</MenubarTrigger>
          <MenubarContent>
            <MenubarCheckboxItem checked={visible} onCheckedChange={setVisible}>Show status</MenubarCheckboxItem>
          </MenubarContent>
        </MenubarMenu>
      </Menubar>
      {visible && <p>All changes saved.</p>}
    </div>
  );
}

API 레퍼런스

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

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

접근성

  • 01

    페이지 이동이 아닌 명령에 사용하고 menubar에 이름을 부여하세요.

  • 02

    방향키로 메뉴 사이를 이동합니다. 비활성 항목은 실행되지 않습니다.