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 floating icon, 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.

Find the right support path.Private consulting and expert support.NewMove from other libraries with confidence.

Menu variants

Each primary-nav item opens a mega-menu. Most are built from the shared MegaMenuItem row, but Libraries, Blog, Merch, and the Support rail use bespoke layouts. The live menus depend on router, overlay, and data context, so they're documented here rather than rendered inline.

Libraries

Five category columns (Framework, Data & State, UI & UX, Performance, Tooling) with mono category-colored headers over icon + name rows. Built from the canonical libraryCategories taxonomy; a "Browse all libraries" footer opens the full-screen overlay.

Blog

Three recent-post cards (cover image, title, excerpt, author · date) loaded on hover via the fetchRecentPosts server fn, over an About row: YouTube, Workshops, Release Notes.

Support

Two link columns (Support, About) plus a Partners rail — a left-divided column with the "Work with TanStack" emblem lockup and a Get in touch link anchored to the bottom.

Merch

A three-up grid of product cards (image-forward) fetched from Shopify on hover, with a centered "View all" link to the shop.

Community & Tools

Standard section layouts of MegaMenuItem rows — Channels / People & Work for Community, and Builder / Stats for Tools.

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).

2Primary nav

Libraries, Blog, 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.