네비게이션 메뉴

네비게이션 메뉴 (Navigation Menu)

웹사이트를 탐색하기 위한 링크의 모음이에요. 여러 메뉴 항목을 그룹으로 묶고, 항목을 누르면 하위 콘텐츠가 나타나는 구조를 만들 때 사용하는 컴포넌트예요. 주로 헤더 같은 곳에서 상위 메뉴에 마우스를 올리면 드롭다운 형태로 하위 링크가 펼쳐지는 네비게이션을 구현할 때 써요.

출처: 문서

본문

설치하기

CLI Manual 
npx shadcn@latest add navigation-menu

다음 의존성을 설치해 주세요.

npm install @radix-ui/react-navigation-menu

다음 코드를 프로젝트에 복사해서 붙여넣어 주세요.

import 경로를 프로젝트 설정에 맞게 바꿔 주세요.

사용하기

필요한 컴포넌트를 import 하고,

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

다음 구조로 조립하면 돼요. NavigationMenuTrigger가 메뉴를 여는 트리거 역할을 하고, NavigationMenuContent에 하위 링크를 넣어요.

<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Item One</NavigationMenuTrigger>
      <NavigationMenuContent>
        <NavigationMenuLink>Link</NavigationMenuLink>
      </NavigationMenuContent>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

예시

Link 컴포넌트

Next.js의 <Link /> 컴포넌트를 사용할 때는 navigationMenuTriggerStyle() 함수를 이용해서 트리거에 알맞은 스타일을 그대로 적용할 수 있어요.

import { navigationMenuTriggerStyle } from "@/components/ui/navigation-menu"

<NavigationMenuItem>
  <Link href="/docs" legacyBehavior passHref>
    <NavigationMenuLink className={navigationMenuTriggerStyle()}>
      Documentation
    </NavigationMenuLink>
  </Link>
</NavigationMenuItem>

클라이언트 사이드 라우팅 처리에 대한 내용은 Radix UI 문서도 함께 보면 좋아요.

더 알아보기 (Learn more)