GitHub

Navigation Menu

웹사이트 탐색을 위한 링크 모음입니다.

examples/krds/navigation-menu-demo.tsx
"use client"

import Link from "next/link"

설치

pnpm dlx shadcn@latest add https://krdscn.gwlee.kr/r/navigation-menu.json

사용법

import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
} from "@/components/ui/navigation-menu"
<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Item One</NavigationMenuTrigger>
      <NavigationMenuContent>
        <NavigationMenuLink>Link</NavigationMenuLink>
      </NavigationMenuContent>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

KRDS 정렬

  • 분류: Radix/shadcn NavigationMenu compound API를 유지하는 KRDS-styled navigation primitive입니다. asChild, trigger/content/link 조합은 기존 shadcn 패턴과 호환됩니다.
  • KRDS 적용: trigger, viewport, popup, link focus states가 KRDS navigation surface에 맞춰 조정되어 있습니다.
  • 사용 권장: 전역 정부서비스 main menu는 이 primitive를 직접 노출하기보다 header/main-menu block에서 data-driven composition으로 조합하세요.

구성

다음 조합으로 NavigationMenu:

NavigationMenu
├── NavigationMenuList
│   ├── NavigationMenuItem
│   │   ├── NavigationMenuTrigger
│   │   └── NavigationMenuContent
│   │       ├── NavigationMenuLink
│   │       └── NavigationMenuLink
│   └── NavigationMenuItem
│       └── NavigationMenuLink
└── NavigationMenuIndicator

Next.js Link 같은 커스텀 링크 컴포넌트는 asChild prop으로 조합하세요.

import Link from "next/link"

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

export function NavigationMenuDemo() {
  return (
    <NavigationMenuItem>
      <NavigationMenuLink asChild className={navigationMenuTriggerStyle()}>
        <Link href="/docs">Documentation</Link>
      </NavigationMenuLink>
    </NavigationMenuItem>
  )
}

RTL

RTL 지원을 활성화하려면 RTL 설정 가이드를 참고하세요.

examples/krds/navigation-menu-rtl.tsx
"use client"

import * as React from "react"

API 참조

Radix UI Navigation Menu API 문서를 참고하세요.