Navigation Menu
설치 확인다단 상단 메뉴
1. 목적과 출처
다단 상단 메뉴
- 출처
- shadcn 기본 제공 (Base UI 기반 base-nova 스타일)
- 프로젝트
src/components/ui/navigation-menu.tsx- Registry
@adcapsule/navigation-menu
2. 프리뷰와 변형
오른쪽 위에서 색 모드를 바꾸면 라이트·다크를 비교할 수 있습니다.
| 구성 | 모양 |
|---|---|
| 펼치는 메뉴 + 링크 | |
| 펼치는 메뉴만 |
3. 속성 바꿔 보기
4. 설치와 사용
- npm 패키지
- @base-ui/react, class-variance-authority, lucide-react
- 함께 설치
- @adcapsule/utils
처음 쓰는 프로젝트는 @adcapsule/theme를 먼저 설치합니다. Registry 연결
5. 바꿔도 되는 것과 유지할 토큰
제품에서 바꿔도 되는 것
- 펼치는 메뉴와 바로 가는 링크(navigationMenuTriggerStyle) 섞기
- 펼친 창 안의 배치는 자유
- 마케팅 상단 메뉴(P20)에 쓴다
공통으로 유지할 토큰
- control.height.md (트리거)
- radius.md (트리거·항목 6px)
- radius.lg (펼친 창 10px)
- surface.raised (펼친 창, --popover)