Dual-Row Navbar

Navbar38: Dual-Row Navbar

A two-tier navbar for e-commerce and service sites: a slim, muted top strip carries an announcement string plus a row of contact links (phone/mail icons, with labels hidden below sm), and a standard bordered navigation row sits underneath it with the logo, links rendered as ghost buttons, and CTAs. Both rows are wrapped together so the whole header stays sticky as one unit.

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

Base UI flavor

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

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

Quick start

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

import { Navbar38, navbar38Demo } from "@/components/beste/block/navbar38";

export default function Layout() {
  return <Navbar38 {...navbar38Demo} />;
}

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

import { Navbar38 } from "@/components/beste/block/navbar38";

export default function Layout() {
  return (
    <Navbar38
      topBarText="Free shipping on orders over $50"
      topBarLinks={[
        { label: "+1 (555) 123-4567", href: "tel:+15551234567", icon: "phone" },
        { label: "[email protected]", href: "mailto:[email protected]", icon: "mail" },
      ]}
      logo={{ text: "DualNav", href: "/" }}
      navItems={[
        { label: "Home", href: "/" },
        { label: "Products", href: "/products" },
        { label: "Contact", href: "/contact" },
      ]}
      buttons={[
        { label: "Sign In", variant: "ghost", href: "/login" },
        { label: "Get Quote", variant: "default", href: "/quote" },
      ]}
    />
  );
}

Props

type TopBarLink = {
  label: string;
  href?: string;
  icon?: "phone" | "mail";
};

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

Behavior notes

• The whole component (top strip + main nav) is wrapped in one sticky top-0 <div>, so both rows scroll away together and lock to the top as a unit; the main <nav> keeps its own bottom border.
• TopBarLink.icon maps to a small Phone or Mail icon; the label text itself is hidden below sm (hidden sm:inline), leaving just the icon on narrow viewports.
• Desktop nav items render as variant="ghost" Buttons (not plain links) inside the main row, giving them a hover background instead of just a color change.
• Desktop links, buttons, and the top bar's link labels show from lg/sm up; below lg a hamburger toggles a conditionally rendered panel ({mobileMenuOpen && ...}) with plain link rows and stacked full-width buttons — the top strip itself has no mobile-specific collapse.