"use client";

import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport } from "@/components/ui/navigation-menu";

export default function Example() {
  return (
    <NavigationMenu aria-label="Main navigation">
      <NavigationMenuList>
        <NavigationMenuItem>
          <NavigationMenuTrigger>Resources</NavigationMenuTrigger>
          <NavigationMenuContent><NavigationMenuLink href="/guides">Guides</NavigationMenuLink></NavigationMenuContent>
        </NavigationMenuItem>
      </NavigationMenuList>
      <NavigationMenuViewport />
    </NavigationMenu>
  );
}

API 레퍼런스

Base UI의 탐색 상태를 유지하고 열린 메뉴를 inset 표면으로 표현합니다. NavigationMenuViewport를 루트 안에 한 번 배치합니다.

컴포넌트	속성	타입	기본값	설명
`NavigationMenu`	`value / onValueChange`	`NavigationMenu.Root.Props`	`—`	현재 열린 항목과 변경 콜백입니다.
`NavigationMenuLink`	`render`	`ReactElement`	`—`	프레임워크 링크를 render로 연결합니다.
`NavigationMenuViewport`	`side / align / sideOffset`	`NavigationMenuViewportProps`	`—`	팝업의 위치와 여백을 지정합니다.

Navigation Menu

미리보기

제품 탐색 메뉴

설치

사용법

API 레퍼런스

접근성