Navigation Menu
계층적 네비게이션 메뉴를 만들 수 있는 컴포넌트입니다. Radix UI를 기반으로 재설계되어 부드러운 애니메이션과 웹 접근성을 지원합니다.
설치
Terminal
npx @msub-core/ui-cli add navigation-menu
사용법
TSX
import {
NavigationMenu,
NavigationMenuList,
NavigationMenuItem,
NavigationMenuTrigger,
NavigationMenuContent,
NavigationMenuLink,
} from "@msub-core/ui/components/navigation-menu"
function MyComponent() {
return (
<NavigationMenu>
<NavigationMenuList>
<NavigationMenuItem>
<NavigationMenuTrigger>제품</NavigationMenuTrigger>
<NavigationMenuContent>
<div className="p-4 w-[400px] grid gap-3">
<NavigationMenuLink href="/products" className="block p-3 hover:bg-muted rounded-md border">
<div className="font-semibold mb-1">제품 목록</div>
<div className="text-sm text-muted-foreground">모든 제품을 확인하세요</div>
</NavigationMenuLink>
<NavigationMenuLink href="/new" className="block p-3 hover:bg-muted rounded-md border">
<div className="font-semibold mb-1">신제품</div>
<div className="text-sm text-muted-foreground">가장 최신 제품을 만나보세요</div>
</NavigationMenuLink>
</div>
</NavigationMenuContent>
</NavigationMenuItem>
</NavigationMenuList>
</NavigationMenu>
)
}