Navigation Menu SSR

Server-side rendered navigation menu with smooth animations and responsive design for better performance.

December 6, 2024 (1y ago)shadcn/navigation-menu

$npx shadcn@latest add https://tiendat.work/r/navigation-menu.json

Installation

pnpm dlx shadcn@latest add https://tiendat.work/r/navigation-menu.json

Usage

import {
  NavigationMenuSSR,
} from "@/components/NavigationMenuSSR";

export function NavigationDemo() {
  return (
    <NavigationMenuSSR
      items={[
        { label: "Home", href: "/" },
        { label: "About", href: "/about" },
        { label: "Services", href: "/services" },
        { label: "Contact", href: "/contact" }
      ]}
      className="bg-white shadow-md"
      variant="horizontal"
    />
  );
}

Installation

Usage

Examples

Basic Navigation Menu SSR