Multi-Level Dropdown Nav

Navbar33: Multi-Level Dropdown Nav

Navbar for enterprise software and documentation sites with deep information architecture: desktop nav items open hover-activated dropdowns, and any dropdown entry can itself carry a nested flyout sub-menu.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/navbar33?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/navbar33?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/navbar33.tsx and the shadcn/ui dependency it needs (button).

Quick start

The installed file exports navbar33Demo alongside the block: the exact props behind the preview above. Spread it to get a working navbar in one line.

import { Navbar33, navbar33Demo } from "@/components/beste/block/navbar33";

export default function Layout() {
  return <Navbar33 {...navbar33Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Navbar33 } from "@/components/beste/block/navbar33";

export default function Layout() {
  return (
    <Navbar33
      logo={{ text: "TechCorp", href: "/" }}
      navItems={[
        {
          label: "Products",
          dropdownItems: [
            {
              label: "Software",
              subItems: [
                { label: "CRM Platform", href: "/crm" },
                { label: "Analytics Suite", href: "/analytics" },
              ],
            },
            { label: "Cloud Services", href: "/cloud" },
          ],
        },
        { label: "Pricing", href: "/pricing" },
      ]}
      buttons={[
        { label: "Sign in", variant: "ghost", href: "/login" },
        { label: "Get demo", href: "/demo" },
      ]}
    />
  );
}

Props

type NavItem = { label: string; href?: string; dropdownItems?: DropdownItem[] };

type DropdownItem = { label: string; href?: string; subItems?: SubMenuItem[] };

type SubMenuItem = { label: string; href?: string };

Behavior notes

• On desktop, dropdowns and their nested sub-menus open on mouse hover (onMouseEnter/onMouseLeave on the wrapping <div>), not click; the nested flyout is positioned to the right of its parent row (left-full).
• On mobile, the same two levels become click-to-expand accordions instead of hover panels, tracked in a Set of expanded keys (item.label for the top level, `${item.label}-${dropdownItem.label}` for the nested level), so multiple branches can stay open at once.
• The mobile menu panel scrolls independently of the page (max-h-[calc(100vh-4rem)] overflow-y-auto) so long, deeply nested menus stay usable on short viewports.
• The mobile breakpoint is lg (1024px).
• The bar is sticky (sticky top-0 z-50) with a solid bg-background and a bottom border, no blur.