shadcn - navigation-menu

Navigation Menu

아래 코맨드로 설치를 하면 components/ui 아래 navigation-menu.tsx 파일이 생기고, 이것을 불러들여 만들어 감

// 설치
npx shadcn-ui@latest add navigation-menu

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

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

실제 사용 예

<div className='hidden sm:flex justify-center items-center col-span-6'>
            <NavigationMenu >
                <NavigationMenuList>
                    {navigationItems.map((item, index)=>(
                        <NavigationMenuItem key={index}>
                            <Link href={item.href} legacyBehavior passHref>
                                <NavigationMenuLink
                                    active={pathname === item.href}
                                    className={navigationMenuTriggerStyle()} 
                                    >
                                    {item.name}
                                </NavigationMenuLink>
                            </Link>
                        </NavigationMenuItem>
                    ))}
                </NavigationMenuList>
            </NavigationMenu>
        </div>