Marketing navbar

Pro

The header of a marketing site: brand, links with menus and descriptions, and actions like Sign in and a call to action. Sticks to the top and shows its edge once the page scrolls; on phones the links move into a panel.

npx prodular-ui add marketing-navbar

Part of Prodular UI Pro. Preview and read the docs freely, install with a license. See pricing

A product site

Product opens a two column menu with icons, Customers a single column. Narrow the window to see the phone panel.

Relay

import { BarChart3Icon, BotIcon, FileTextIcon, PlugIcon, ReceiptTextIcon, ShieldCheckIcon } from "lucide-react"
import { Button } from "@/components/ui/button"import { MarketingNavbar, type MarketingNavLink } from "@/components/ui/marketing-navbar"
const links: MarketingNavLink[] = [  {    label: "Product",    items: [      { label: "Invoicing", href: "#", description: "Send, track and get paid.", icon: ReceiptTextIcon },      { label: "Collections", href: "#", description: "Reminders that sound like you.", icon: FileTextIcon },      { label: "Relay Analyst", href: "#", description: "Ask about your receivables.", icon: BotIcon },      { label: "Reports", href: "#", description: "Cash, aging and forecasts.", icon: BarChart3Icon },      { label: "Integrations", href: "#", description: "NetSuite, QuickBooks, Xero.", icon: PlugIcon },      { label: "Security", href: "#", description: "SSO, audit log, SOC 2.", icon: ShieldCheckIcon },    ],  },  {    label: "Customers",    items: [      { label: "Logistics", href: "#", description: "Freight and fleet billing." },      { label: "Healthcare", href: "#", description: "Clinics and labs." },      { label: "Agencies", href: "#", description: "Retainers and milestones." },    ],  },  { label: "Pricing", href: "#" },  { label: "Changelog", href: "#" },]
function Brand() {  return (    <a href="#" className="flex items-center gap-2 rounded-md text-[15px] font-semibold tracking-tight outline-none focus-visible:ring-3 focus-visible:ring-ring/40">      <span aria-hidden="true" className="flex size-6 items-center justify-center rounded-md bg-primary text-xs text-primary-foreground">        R      </span>      Relay    </a>  )}
export default function MarketingNavbarSite() {  return (    <div className="w-full overflow-visible rounded-xl border bg-background">      <MarketingNavbar        sticky={false}        brand={<Brand />}        links={links}        actions={          <>            <Button variant="ghost">Sign in</Button>            <Button>Start free trial</Button>          </>        }        className="rounded-t-xl"      />      <div className="h-40 border-t bg-muted/30" />    </div>  )}

Anatomy

<MarketingNavbar  brand={<Logo />}  links={links}  actions={<><Button variant="ghost">Sign in</Button><Button>Start free</Button></>}  linkComponent={Link}/>

Guidance

Use it when

The top of every marketing page, once.
Menus for groups of three or more pages; plain links for the rest.
Two actions at most: a quiet Sign in and one call to action.

Avoid

More than five top level items.
Inside the app. Use App shell there.

Rules for AI agents

Published in llms-full.txt, the registry and the MCP server, so coding agents follow them when they build with this component.

Describe links as { label, href } or { label, items: [{ label, href, description?, icon? }] }.
Pass linkComponent={Link} from next/link for client routing.
Keep sticky on; the edge and shadow appear only after scrolling, so the hero stays clean.
Its width matches Section; pass the same width as your sections if you change it.

API