build69 / Components / Navigation / Navbar

Navbar

v1.0.8Updated 27 Aug 2026

Responsive marketing / public-site top navigation (logo + links + CTA + mobile hamburger) — distinct from the in-app Topbar chrome. Pass a logo, an array of links (each may carry children for a dropdown / mega-menu), and

View source ← Back to catalog

Preview

Live · 12 stories

DefaultOpen ↗

▸Why this is recommendednavigationnavbarheadermarketing+4

The default, out-of-the-box Navbar.

Recommended for+14

✓Marketing / landing-page headers
✓SaaS public-site navigation with a mega-menu
✓Hero pages needing a transparent-on-scroll bar

Tags+6

navigationnavbarheadermarketingmega-menustickyresponsivedefault

Features+4

Desktop logo / links / actions layout, mobile hamburger disclosure
Links with children open a dropdown / mega-menu (icon + label + description grid)
Variants: default (blur) / floating (inset rounded card) / bordered
sticky pinning to the top of the viewport
transparent overlay on a hero that turns solid on scroll
Active link state
Proper landmarks (header + nav aria-label), keyboard accessible (Esc to close)

Not recommended for−2

✕In-app top chrome (use Topbar)
✕Left-hand app navigation (use Sidebar)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "Navbar" })

Usage

import { Navbar } from '@/components/navigation/navbar';

<Navbar
  logo="build69"
  links={[{ label: 'Product', href: '#', children: [{ label: 'Overview', href: '#', description: 'What it does' }] }]}
  actions={<Button>Sign up</Button>}
  sticky
/>

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired

logo

Brand mark rendered on the left

ReactNode—

links

Primary links; each may carry children for a mega-menu

NavbarLink[]—

actions

Right-aligned actions (e.g. Login / Sign-up)

ReactNode—

sticky

Pin to the top of the viewport (default true)

boolean—

variant

Visual treatment

'default' | 'floating' | 'bordered'—

transparent

Overlay on a hero; solid once scrolled