build69
build69  /  Components  /  Navigation  /  Navbar

Navbar

v1.0.15Updated 19 Oct 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)
  • Client-side routing: pass `linkComponent` (next/link, React Router Link) and every row that has an href renders through the host app link component instead of a plain anchor, which would reload the whole document (fb_bf7dc63a), across the brand, desktop links, dropdown panels and the mobile sheet
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

boolean—
linkComponent

The host app link component for the brand, the desktop links, the dropdown panel rows and the mobile sheet. NavbarLink.onClick and NavbarMenuItem.onClick receive the click EVENT. Slots: navbar-logo, navbar-link, navbar-menu-link. MCP feedback fb_bf7dc63a.

NavbarLinkComponent—

Related

Platform docsAll componentsSource files