Navbar

The global navigation bar that sits fixed at the top of every TanStack surface. It's a layout organism — brand, primary mega-menu navigation, and a utility cluster — and adapts from a full desktop bar to a compact mobile menu. Source: src/components/Navbar.tsx.

Anatomy

A static replica built from the production classes and the shared --navbar-height token. Toggle a device size, or leave it on Auto to watch it reflow with the screen — driven by container queries, so it mirrors the real navbar's 900px / 1120px breakpoints at any width.

Responsive · tracks screen

Mega menu item

The row used inside the primary-nav mega menus — a bordered icon square, a Bricolage-bold title (heading-5), and a muted body-xs description. Rest / hover / press apply a mode-adaptive overlay. Source: src/components/MegaMenuItem.tsx.

Support OverviewFind the right support path.Enterprise SupportPrivate consulting and expert support.Migration guidesNewMove from other libraries with confidence.

Regions

Three regions laid out with flex justify-between: brand on the left, primary navigation centered, utilities on the right.

1Brand

Logo mark and wordmark, linking home. Right-clicking opens the brand context menu (logo assets, Brand Guide).

2Primary nav

Libraries, Learn, Community, Tools, Merch, and Support — each a hover/focus mega-menu. Collapses into the mobile menu below 900px.

3Utility cluster

Social links, theme toggle, cart, search, the AI dock, and auth controls — plus the hamburger trigger on mobile.

Layout & spacing

The tokens and utilities that give the bar its rhythm. Height is driven by a CSS variable so sticky offsets across the site stay in sync.

Height--navbar-height: 58px

Container paddingpx-3 py-2 · min-[900px]:px-5

Region gapgap-2 · min-[1120px]:gap-4

Primary nav item gapgap-1

Utility cluster gapgap-2 · sm:gap-2.5

Nav trigger paddingpx-2 py-2 · min-[1120px]:px-3

Nav trigger texttext-xs · min-[1120px]:text-[13px]

Surfacebg-white/90 dark:bg-black/90

Borderborder-b border-gray-500/20

Responsive behavior

Two breakpoints reshape the bar as space tightens.

900≥ 900px — Desktop

Full primary navigation with mega-menu dropdowns; the hamburger is hidden.

1120≥ 1120px — Wide

Social links join the utility cluster and region gaps widen for extra breathing room.

0< 900px — Mobile

Primary nav collapses to a hamburger that opens a full-width collapsible menu below the bar.

Source

This organism lives in the app, not the copy-paste registry — it's wired to routing, auth, and cart state.

src/components/Navbar.tsx

Mounted once in __root.tsx as <Navbar>{children}</Navbar>. Menu contents are defined in the NAV_GROUPS config at the top of the file.