NavigationMenu

A sophisticated navigation menu component with nested dropdowns, hover states, keyboard navigation, and full accessibility. Supports both horizontal and vertical orientations with customizable trigger modes and styling variants.

Horizontal Menu - Default Variant

Horizontal Menu - Modern Variant

Horizontal Menu - Minimal Variant

Vertical Sidebar Menu

Click Trigger Menu (Desktop App Style)

Without Icons

Mobile-Style Vertical Menu

NavigationMenu Component
tsx
1"use client";
2import React, { useState, useRef, useEffect } from "react";
3import { ChevronDown, ChevronRight } from "lucide-react";
4import { cva, type VariantProps } from "class-variance-authority";
5import { cn } from "@/lib/cn";
6

7const navigationMenuVariants = cva([
8  "relative flex items-center",
9], {
10  variants: {
11    orientation: {
12      horizontal: "flex-row",
13      vertical: "flex-col items-stretch",
14    },
15    variant: {
16      default: "",
17      modern: "",
18      minimal: "",
19    },
20  },