"use client";

import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
  navigationMenuTriggerStyle,
} from "@countryclub/ui-react";

export default function NavigationMenuDemo() {
  return (
    <NavigationMenu>
      <NavigationMenuList>
        <NavigationMenuItem>
          <NavigationMenuTrigger>Membership</NavigationMenuTrigger>
          <NavigationMenuContent>
            <div className="grid w-[360px] grid-cols-2 gap-1">
              <NavigationMenuLink href="#">
                <div className="font-medium">Join the club</div>
                <p className="text-muted-foreground text-xs leading-snug">
                  Browse membership tiers and seasonal offers.
                </p>
              </NavigationMenuLink>
              <NavigationMenuLink href="#">
                <div className="font-medium">Member directory</div>
                <p className="text-muted-foreground text-xs leading-snug">
                  Find playing partners and committee contacts.
                </p>
              </NavigationMenuLink>
              <NavigationMenuLink href="#">
                <div className="font-medium">Guest passes</div>
                <p className="text-muted-foreground text-xs leading-snug">
                  Invite friends for a round or dinner.
                </p>
              </NavigationMenuLink>
              <NavigationMenuLink href="#">
                <div className="font-medium">Billing</div>
                <p className="text-muted-foreground text-xs leading-snug">
                  Dues, statements, and house accounts.
                </p>
              </NavigationMenuLink>
            </div>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuTrigger>Club Life</NavigationMenuTrigger>
          <NavigationMenuContent>
            <div className="grid w-64 gap-1">
              <NavigationMenuLink href="#">
                <div className="font-medium">Tee times</div>
                <p className="text-muted-foreground text-xs leading-snug">
                  Reserve morning and twilight rounds.
                </p>
              </NavigationMenuLink>
              <NavigationMenuLink href="#">
                <div className="font-medium">Dining</div>
                <p className="text-muted-foreground text-xs leading-snug">
                  Book a table at the clubhouse grill.
                </p>
              </NavigationMenuLink>
              <NavigationMenuLink href="#">
                <div className="font-medium">Events</div>
                <p className="text-muted-foreground text-xs leading-snug">
                  Tournaments, galas, and socials.
                </p>
              </NavigationMenuLink>
            </div>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuLink className={navigationMenuTriggerStyle()} href="#">
            Docs
          </NavigationMenuLink>
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  );
}
Navigation Menu

Import

Default
