Menubar

설치 확인

앱 상단 메뉴 막대

1. 목적과 출처

앱 상단 메뉴 막대

출처: shadcn 기본 제공 (Base UI 기반 base-nova 스타일)
프로젝트: src/components/ui/menubar.tsx
Registry: @adcapsule/menubar

2. 프리뷰와 변형

오른쪽 위에서 색 모드를 바꾸면 라이트·다크를 비교할 수 있습니다.

Menubar
구성	모양
파일·편집·보기

3. 속성 바꿔 보기

메뉴를 골라 보세요 · 사이드바 보임

사이드바 보기(체크 항목)

<Menubar>
  <MenubarMenu>
    <MenubarTrigger>파일</MenubarTrigger>
    <MenubarContent>
      <MenubarItem onClick={…}>새 이슈 <MenubarShortcut>C</MenubarShortcut></MenubarItem>
    </MenubarContent>
  </MenubarMenu>
  <MenubarMenu>
    <MenubarTrigger>보기</MenubarTrigger>
    <MenubarContent>
      <MenubarCheckboxItem checked={true} onCheckedChange={…}>사이드바 보기</MenubarCheckboxItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

4. 설치와 사용

npx shadcn@4.23.0 add @adcapsule/menubar

npm 패키지: @base-ui/react, lucide-react
함께 설치: @adcapsule/dropdown-menu, @adcapsule/utils

처음 쓰는 프로젝트는 @adcapsule/theme를 먼저 설치합니다. Registry 연결

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

<Menubar>
  <MenubarMenu>
    <MenubarTrigger>파일</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>새 이슈</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

5. 바꿔도 되는 것과 유지할 토큰

제품에서 바꿔도 되는 것

MenubarShortcut으로 단축키 표시
MenubarCheckboxItem·RadioItem
MenubarSub로 하위 메뉴
MenubarLabel은 반드시 MenubarGroup 안에

공통으로 유지할 토큰

control.height.md (막대)
radius.md (막대 6px)
radius.sm (막대 안 트리거 4px)
radius.lg (펼친 메뉴 10px)

구성

모양

파일·편집·보기

3. 속성 바꿔 보기

메뉴를 골라 보세요 · 사이드바 보임

사이드바 보기(체크 항목)

<Menubar>
  <MenubarMenu>
    <MenubarTrigger>파일</MenubarTrigger>
    <MenubarContent>
      <MenubarItem onClick={…}>새 이슈 <MenubarShortcut>C</MenubarShortcut></MenubarItem>
    </MenubarContent>
  </MenubarMenu>
  <MenubarMenu>
    <MenubarTrigger>보기</MenubarTrigger>
    <MenubarContent>
      <MenubarCheckboxItem checked={true} onCheckedChange={…}>사이드바 보기</MenubarCheckboxItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

4. 설치와 사용

npx shadcn@4.23.0 add @adcapsule/menubar

npm 패키지: @base-ui/react, lucide-react
함께 설치: @adcapsule/dropdown-menu, @adcapsule/utils

처음 쓰는 프로젝트는 @adcapsule/theme를 먼저 설치합니다. Registry 연결

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

<Menubar>
  <MenubarMenu>
    <MenubarTrigger>파일</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>새 이슈</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

5. 바꿔도 되는 것과 유지할 토큰

제품에서 바꿔도 되는 것

MenubarShortcut으로 단축키 표시
MenubarCheckboxItem·RadioItem
MenubarSub로 하위 메뉴
MenubarLabel은 반드시 MenubarGroup 안에

공통으로 유지할 토큰

control.height.md (막대)
radius.md (막대 6px)
radius.sm (막대 안 트리거 4px)
radius.lg (펼친 메뉴 10px)

1. 목적과 출처

2. 프리뷰와 변형

3. 속성 바꿔 보기

4. 설치와 사용

5. 바꿔도 되는 것과 유지할 토큰

제품에서 바꿔도 되는 것

공통으로 유지할 토큰

6. 관련 패턴·템플릿

1. 목적과 출처

2. 프리뷰와 변형

3. 속성 바꿔 보기

4. 설치와 사용

5. 바꿔도 되는 것과 유지할 토큰

제품에서 바꿔도 되는 것

공통으로 유지할 토큰

6. 관련 패턴·템플릿