TanStack

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 (container queries mirror the real 900px / 1120px breakpoints). The numbered regions below label the parts of the bar, left to right.

Responsive · tracks screen
TanStack
1Brand

Logo mark and wordmark, linking home; right-clicking opens the brand context menu (logo assets). Sits in the left flex-1 slot, so the primary nav lands centered.

2Primary nav + search

Libraries, Blog, Community, Tools, Merch, and Support — each a hover/focus mega-menu — with the search button in its own slot right after them. Collapses to the mobile menu below 900px.

3Utility cluster

Social stack, theme toggle, cart, the AI dock, and auth controls, pushed to the right edge by a flex-1 — plus the hamburger trigger on mobile.

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.

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

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
Borderscroll-reactive hairline — bg-border-subtle, fades in on scroll

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-height sliding panel with Search, Ask AI, and Sign In.

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.