1 variant

Navbar

A wordmark, the links and up to two actions, transparent over a hero until you scroll. Any entry can open a menu, and the whole thing collapses to a panel on a phone.

page.tsx

import { SiteNavbar } from "@/components/blocks/site-navbar";

export default function Layout({ children }) {
  return (
    <>
      <SiteNavbar
        brand={{ label: "Northline", href: "/" }}
        links={[
          {
            label: "Product",
            items: [
              { label: "Revenue reporting", href: "/product", description: "Reconciled nightly" },
              { label: "Invoicing", href: "/invoicing" },
            ],
          },
          { label: "Pricing", href: "/pricing" },
        ]}
        secondaryAction={{ label: "Sign in", href: "/sign-in" }}
        primaryAction={{ label: "Start free", href: "/signup" }}
      />
      {children}
    </>
  );
}

"use client";

import { ChevronDown, Menu, X } from "lucide-react";
import { useEffect, useRef, useState } from "react";
import { cn } from "@/lib/utils";

export interface NavItem {
  label: string;
  href: string;
  /** One line under the label inside a menu. Ignored on a plain link. */
  description?: string;
}

298 more lines ship with an easeUI Pro license.

Buy a license

Install

$ bunx --bun shadcn add @easeui-pro/navbar