Sidebar Drawer Navbar

Navbar34: Sidebar Drawer Navbar

Navbar for content-rich sites that want their full navigation off-canvas: a slim top bar shows only the logo, up to four links, and action buttons, while a hamburger opens a full-height slide-in drawer with grouped, titled sections for everything else.

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/navbar34?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

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

Quick start

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

import { Navbar34, navbar34Demo } from "@/components/beste/block/navbar34";

export default function Layout() {
  return <Navbar34 {...navbar34Demo} />;
}

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

import { Navbar34 } from "@/components/beste/block/navbar34";

export default function Layout() {
  return (
    <Navbar34
      logo={{ text: "Acme", href: "/" }}
      navSections={[
        { items: [{ label: "Home", href: "/" }, { label: "Blog", href: "/blog" }] },
        {
          title: "Company",
          items: [
            { label: "Careers", href: "/careers" },
            { label: "Contact", href: "/contact" },
          ],
        },
      ]}
      actionButtons={[{ label: "Get started", href: "/signup" }]}
      sidebarPosition="left"
    />
  );
}

Props

type NavSection = { title?: string; items: NavItem[] };

type NavItem = { label: string; href?: string; icon?: React.ReactNode };

Behavior notes

• Only navSections[0]'s first four items appear inline in the desktop top bar; every section (including titled ones), any items past the fourth, and the full nav always live in the drawer only.
• The hamburger button sits on the same edge as sidebarPosition, and the drawer slides in from that same edge, capped at w-80 and 85vw on narrow screens, with a translate-x transition.
• Opening the drawer sets document.body.style.overflow = "hidden" to lock background scroll, restored automatically on close or unmount.
• A full-screen blurred backdrop (bg-background/80 backdrop-blur-sm) closes the drawer on click; clicking any link inside the drawer also closes it.
• Section titles render only when title is set, as an uppercase muted label above that group's items; each NavItem can carry an arbitrary icon node rendered before its label.