Navigation Menu
Base UI의 탐색 상태를 유지하고 열린 메뉴를 inset 표면으로 표현합니다. NavigationMenuViewport를 루트 안에 한 번 배치합니다.
@neumorphism-ui/navigation-menu미리보기
메뉴에서 이동할 섹션을 선택하세요.
컴포넌트 · 56
테마 · 5
설치
설치: navigation-menu
npx shadcn@latest add @neumorphism-ui/navigation-menuCLI가 npm 의존성, base 토큰, utils와 컴포넌트 소스를 순서대로 확인하고 설치합니다.
Registry를 처음 사용한다면 namespace 설정 을 먼저 완료하세요.
사용법
Import
Navigation Menu import 코드
"use client";
import { NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink, NavigationMenuViewport } from "@/components/ui/navigation-menu";Example
Navigation Menu 사용 코드
export default function Example() {
return <div><NavigationMenu aria-label="제품"><NavigationMenuList><NavigationMenuItem><NavigationMenuTrigger>제품</NavigationMenuTrigger><NavigationMenuContent><NavigationMenuLink href="#navigation-guide">안내</NavigationMenuLink></NavigationMenuContent></NavigationMenuItem></NavigationMenuList><NavigationMenuViewport /></NavigationMenu><p id="navigation-guide">안내</p></div>;
}API 레퍼런스
| 컴포넌트 | 속성 | 타입 | 기본값 | 설명 |
|---|---|---|---|---|
NavigationMenu | value / onValueChange | NavigationMenu.Root.Props | — | 현재 열린 항목과 변경 콜백입니다. |
NavigationMenuLink | render | ReactElement | — | 프레임워크 링크를 render로 연결합니다. |
NavigationMenuViewport | side / align / sideOffset | NavigationMenuViewportProps | — | 팝업의 위치와 여백을 지정합니다. |
접근성
- 01
사이트 이동에는 실제 href 링크를 사용하고 nav에 이름을 부여하세요.
- 02
Tab·방향키·Escape로 조작하고, 포커스 표시를 제거하지 마세요.