Navbar118: Navbar With Contact Bar and Hanging Logo

A two row header for service businesses: a thin top bar with address, email, phone and social icons in ruled cells, and a menu row where a logo card hangs over the section below while the links, an active state and a standard dropdown sit on the right. On a phone the top bar keeps only the linked contacts, the company name sits centered, and a bordered button opens the menu with collapsible submenus.

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://beste.dev/r/navbar118?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://beste.dev/r-base/navbar118?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/navbar118.tsx. It uses no shadcn primitives, only lucide-react icons and next/image.

Quick start

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

import { Navbar118, navbar118Demo } from "@/components/beste/block/navbar118";

export default function Page() {
  return <Navbar118 {...navbar118Demo} />;
}

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

import { Facebook, Instagram, Mail, MapPin, Phone } from "lucide-react";
import { Navbar118 } from "@/components/beste/block/navbar118";

export default function Page() {
  return (
    <Navbar118
      logo={{ src: "/logo.png", alt: "Harbor Insurance Brokers" }}
      brand="Harbor Insurance Brokers"
      contacts={[
        { label: "Brooklyn, New York", icon: MapPin },
        { label: "[email protected]", href: "mailto:[email protected]", icon: Mail },
        { label: "(+1) 718 555 0179", href: "tel:+17185550179", icon: Phone },
      ]}
      socials={[
        { label: "Instagram", href: "https://instagram.com", icon: Instagram },
        { label: "Facebook", href: "https://facebook.com", icon: Facebook },
      ]}
      items={[
        { label: "Home", href: "/", isActive: true },
        { label: "About us", href: "/about" },
        {
          label: "Our products",
          href: "/products",
          children: [
            { label: "Car insurance", href: "/products/car" },
            { label: "Health insurance", href: "/products/health" },
          ],
        },
        { label: "Contact", href: "/contact" },
      ]}
      labels={{ open: "Open menu", close: "Close menu" }}
    />
  );
}

Props

type ContactItem = {
  label: string;
  href?: string;
  icon?: LucideIcon;
};

type SocialLink = {
  label: string;
  href: string;
  icon: LucideIcon;
};

type NavItem = {
  label: string;
  href: string;
  isActive?: boolean;
  children?: NavChild[];
};

type NavChild = {
  label: string;
  href: string;
};

Behavior notes

• The menu row has a fixed height (h-14, md:h-16) with a full width line under it, and the logo card is absolutely positioned inside a slot of that height. The header always ends at the line, so the next section starts there with no setting on the layout or on that section, and the card hangs over it.
• The header is relative z-30, so the card stays above a following section unless that section sets a higher z-index of its own. Its shadow only falls downward, so no shadow shows above the card.
• A dropdown opens on hover or click, and keyboard focus inside the item reveals it too. It opens from the bottom of the line, has rounded corners only at the bottom, and closes on Escape or a pointer down outside the menu row.
• Dropdown panels and the mobile menu are always rendered and hidden with CSS, so every link is in the server rendered HTML. The closed mobile menu and closed submenus carry inert.
• While the mobile menu is open, the logo card fades out and stops taking taps so it never covers the first menu rows; it fades back in when the menu closes. From lg up the card always stays visible.
• Contacts with an href render as plain a elements, which is right for mailto: and tel: targets. Contacts without one, like an address, are hidden on phones and listed again at the foot of the mobile menu.
• The active item uses isActive; nothing is derived from the current URL, so set it from your router.