# Navbar 5 > A documentation-site header with a collapsing secondary row, breadcrumb promotion, ⌘K search and version switching A shadcn/ui block from the [@shadcnstore](https://www.shadcnstore.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcnstore/navbar-5). - Page, with a live preview: https://shadcn.exchange/r/shadcnstore/navbar-5 - Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcnstore/navbar-5-light-ab001875421692b8.png - Registry item: https://shadcnstore.com/r/navbar-5.json - Listed: 2026-10-13, source last changed 2026-10-13 ## Install ```bash npx shadcn@latest add https://shadcnstore.com/r/navbar-5.json ``` Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on. ## Dependencies - npm packages: `lucide-react`, `motion` - Registry items: `badge`, `breadcrumb`, `button`, `command`, `dropdown-menu`, `kbd`, `select`, `separator`, `sheet` ## Files ### `storage/app/registry-sources/marketing/navbars/navbar-5/page.tsx` ```tsx import { Navbar5 } from '@/components/blocks/marketing/navbars/navbar-5/components/navbar-5' /** * Nav links, breadcrumb, versions and the search index live in `data/navbar-5-docs.ts`. * * The header is `sticky`, so `html { scroll-padding-top }` should clear it for in-page anchors — * same contract as `navbar-3`. * * The page below is deliberately a real documentation article rather than a spacer. Everything * this header does — the secondary row collapsing, the breadcrumb being promoted into the bar, * the search box shrinking to an icon — only happens once you are scrolled past the top, so a * placeholder page shows none of it and the block reads as a plain bar. */ export default function Page() { return (

API · Production data

Production data

Read interval-level generation, consumption and export figures for any site on the account. Scroll and the header condenses: the section row folds away and the breadcrumb moves up into the bar.

{[ { heading: 'Authentication', body: 'Every request is authenticated with a site-scoped key. Keys are issued per environment and never expire on their own — rotate them from the dashboard, and revoke the previous key once traffic has moved across.', code: 'curl https://api.solaris.dev/v3/sites/ste_8f21/production \\\n -H "Authorization: Bearer sk_live_..."', }, { heading: 'Intervals', body: 'Readings are returned at five-minute resolution for the last 90 days and hourly beyond that. Ask for a window wider than a year and the response is downsampled to daily totals rather than truncated.', code: 'GET /v3/sites/:id/production?from=2026-08-01&to=2026-08-17&resolution=hour', }, { heading: 'Gaps and backfill', body: 'An inverter that loses connectivity leaves a gap rather than a zero, so a missing reading is never mistaken for a night. When the device reconnects it backfills, and the affected intervals are re-emitted on the webhook.', code: '{\n "interval": "2026-08-14T11:05:00Z",\n "watt_hours": null,\n "state": "missing"\n}', }, { heading: 'Rate limits', body: 'Sixty requests a minute per key, burst to a hundred. The remaining budget is on every response, and a 429 carries the seconds to wait — read it rather than backing off blindly.', code: 'X-RateLimit-Remaining: 41\nX-RateLimit-Reset: 27', }, ].map(section => (

{section.heading}

{section.body}

                {section.code}

))}

) } ``` ### `storage/app/registry-sources/marketing/navbars/navbar-5/navbar-5.tsx` ```tsx 'use client' import { useEffect, useRef, useState } from 'react' import { motion, useReducedMotion } from 'motion/react' import { Monitor, Moon, MoreHorizontal, Sun } from 'lucide-react' import { Badge } from '@/components/ui/badge' import { Button } from '@/components/ui/button' import { DropdownMenu, DropdownMenuContent, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu' import { Separator } from '@/components/ui/separator' import { Kbd } from '@/components/ui/kbd' import { breadcrumb, docsPreviewSections, githubStarCount, primaryLinks, sectionLinks, versions, } from "@/components/data/navbar-5-docs" import { Navbar5Breadcrumb } from './navbar-5-breadcrumb' import { Navbar5SearchTrigger } from './navbar-5-search-trigger' import { Navbar5SidebarSheet } from './navbar-5-sidebar-sheet' import { Navbar5VersionSwitcher } from './navbar-5-version-switcher' /** * Composition contract * -------------------- * The header is `sticky top-0`, so the page above it must reserve its height, * and `html { scroll-padding-top }` must clear it so in-page anchors do not * land underneath — same contract as `navbar-3`. * * This block is the reference implementation of the ShadcnStore logo rule * (`BLOCK-QUALITY-BAR.md` §5): path data from `resources/views/components/logo.blade.php`, * rendered `currentColor`, `text-primary`, `aria-hidden`, wordmark as text. */ function Logo() { return ( ShadcnStore ) } const themeModes = [ { value: 'light', label: 'Light', icon: Sun }, { value: 'dark', label: 'Dark', icon: Moon }, { value: 'system', label: 'System', icon: Monitor }, ] as const type ThemeMode = (typeof themeModes)[number]['value'] /** * A menu rather than a cycling button. A single icon that rotates through three states gives no * way to see which one is active or to jump straight to the one you want — you have to click and * watch. The radio group states the current mode and lets you pick any other in one action. */ function ThemeMenu({ mode, onModeChange }: { mode: ThemeMode; onModeChange: (mode: ThemeMode) => void }) { const active = themeModes.find(entry => entry.value === mode) ?? themeModes[2] const Icon = active.icon return ( } > Theme onModeChange(value as ThemeMode)}> {themeModes.map(entry => ( {entry.label} ))} ) } /** * GitHub's own mark, not a star glyph. A bare star beside a number reads as a rating — which is * what it looked like here — rather than as a repository's stargazers. * * A readout, not a link. This is a demo header inside a gallery, and the only place a real href * could point is our own repository — so pressing a control in someone's block preview navigated * them off the page they were evaluating. The count is information the header displays; a buyer * who wants it to lead somewhere wraps it in their own anchor. */ function GithubStars({ stars }: { stars: number }) { return ( ) } export function Navbar5() { const reduceMotion = useReducedMotion() const sentinelRef = useRef(null) const [scrolled, setScrolled] = useState(false) // Owned here rather than inside each control, so the desktop switcher and the mobile menu are // two views of one state instead of two controls that disagree the moment either is used. const [themeMode, setThemeMode] = useState('system') const [version, setVersion] = useState(versions[0].value) useEffect(() => { const sentinel = sentinelRef.current if (!sentinel) return let scrollParent: HTMLElement | null = null let ancestor: HTMLElement | null = sentinel.parentElement while (ancestor) { const { overflowY } = getComputedStyle(ancestor) if ((overflowY === 'auto' || overflowY === 'scroll' || overflowY === 'overlay') && ancestor.scrollHeight > ancestor.clientHeight + 1) { scrollParent = ancestor break } ancestor = ancestor.parentElement } if (scrollParent) { const scroller = scrollParent const update = () => setScrolled(scroller.scrollTop > 8) update() scroller.addEventListener('scroll', update, { passive: true }) return () => scroller.removeEventListener('scroll', update) } const observer = new IntersectionObserver(([entry]) => setScrolled(!entry.isIntersecting), { threshold: 0 }) observer.observe(sentinel) return () => observer.disconnect() }, []) return ( // A fragment, not a wrapper. `position: sticky` is resolved against the nearest scrolling // ancestor but constrained by its own parent's box — and a wrapper that contains nothing but // the sentinel and the header is exactly as tall as the header, so the header scrolled away // the moment the page moved. The documented sticky contract was never actually true. Leaving // these as siblings puts the header directly in the consumer's flow, where it can stick. <>

} version={version} onVersionChange={setVersion} />

Docs

{scrolled ? (

) : null}

}> {/* Every row here does something. The previous version listed "Version: v3.2" and "Theme" as inert items, which is worse than omitting them — a control that looks live and does nothing reads as a broken page rather than a missing feature. */} Version {versions.map(entry => ( {entry.label} ))} Theme setThemeMode(value as ThemeMode)}> {themeModes.map(entry => ( {entry.label} ))} {/* A readout here too, for the same reason as the desktop one above. */} {`GitHub · ${(githubStarCount / 1000).toFixed(1)}k stars`}

) } /** * Preview wrapper — not part of what you paste into your own page; import `Navbar5` for that. * * Everything this header does happens on scroll: the section row folds away, the breadcrumb is * promoted into the bar, and the search box shrinks to an icon. Rendered on its own the block * shows none of that and reads as a plain bar, which is exactly how it looked in the gallery * before this existed. Same shape as `navbar-3`: an internal scroller keeps the store iframe * compact while still letting the transition fire. * * The scrollport is deliberately generous. It has to be tall enough that the docs page under the * bar reads as a docs page while you scroll it, rather than as a two-line sliver; at 28rem and * 32rem the body copy was cut off mid-section, so both are up by 30%. */ export default function Navbar5Preview() { return (

API · Production data

Production data

Scroll inside this panel: the section row folds away, the breadcrumb moves up into the bar and the search box collapses to an icon. Press ⌘K to open the palette.

{docsPreviewSections.map(section => (

{section.heading}

{section.body}

                {section.code}

))}

) } ``` ### `storage/app/registry-sources/marketing/navbars/navbar-5/navbar-5-breadcrumb.tsx` ```tsx import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from '@/components/ui/breadcrumb' import type { breadcrumb as breadcrumbData } from "@/components/data/navbar-5-docs" export function Navbar5Breadcrumb({ items, truncate = false }: { items: typeof breadcrumbData; truncate?: boolean }) { const visibleItems = truncate && items.length > 2 ? [items[0], items[items.length - 1]] : items return ( {visibleItems.map((item, index) => { const isLast = index === visibleItems.length - 1 return ( {truncate && index === 1 && items.length > 2 ? ( <> … ) : null} {isLast ? {item.label} : {item.label}} {!isLast ? : null} ) })} ) } ``` ### `storage/app/registry-sources/marketing/navbars/navbar-5/navbar-5-search-trigger.tsx` ```tsx 'use client' import { useCallback, useEffect, useMemo, useState } from 'react' import { BookOpen, Clock, CornerDownLeft, FileCode2, Search, Terminal, Webhook } from 'lucide-react' import { Button } from '@/components/ui/button' import { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, } from '@/components/ui/command' import { Kbd } from '@/components/ui/kbd' import { searchIndex, type SearchIndexEntry } from "@/components/data/navbar-5-docs" /** Section → icon. A palette that returns a flat list of identical rows is a list, not a palette. */ const sectionIcons: Record = { Guides: BookOpen, API: Webhook, SDKs: Terminal, Changelog: FileCode2, } /** * `navigator.platform` is deprecated and absent in some engines, so the userAgent is the * fallback rather than the other way round. */ function isMacPlatform(): boolean { if (typeof navigator === 'undefined') { return false } return /mac/i.test(navigator.platform || navigator.userAgent) } function groupBySection(entries: SearchIndexEntry[]): Array<[string, SearchIndexEntry[]]> { const groups = new Map() for (const entry of entries) { const bucket = groups.get(entry.section) ?? [] bucket.push(entry) groups.set(entry.section, bucket) } return Array.from(groups) } export function Navbar5SearchTrigger({ compact = false }: { compact?: boolean }) { const [open, setOpen] = useState(false) const [platformKey, setPlatformKey] = useState('Ctrl') /** Ids, most recent first. A palette without recents makes you retype the page you just left. */ const [recentIds, setRecentIds] = useState([]) useEffect(() => { setPlatformKey(isMacPlatform() ? '⌘' : 'Ctrl') }, []) useEffect(() => { function onKeyDown(event: KeyboardEvent) { if (event.key.toLowerCase() === 'k' && (event.metaKey || event.ctrlKey)) { event.preventDefault() setOpen(current => !current) } } document.addEventListener('keydown', onKeyDown) return () => document.removeEventListener('keydown', onKeyDown) }, []) const groups = useMemo(() => groupBySection(searchIndex), []) const recents = useMemo( () => recentIds.map(id => searchIndex.find(entry => entry.id === id)).filter(Boolean) as SearchIndexEntry[], [recentIds] ) const handleSelect = useCallback((entry: SearchIndexEntry) => { setRecentIds(current => [entry.id, ...current.filter(id => id !== entry.id)].slice(0, 3)) setOpen(false) }, []) const renderItem = (entry: SearchIndexEntry, keyPrefix: string) => { const Icon = sectionIcons[entry.section] ?? BookOpen return ( handleSelect(entry)} > {entry.title} {entry.section} ) } return ( <> {compact ? ( ) : ( )} No pages match that search. {recents.length > 0 && ( <> {recents.map(entry => ( handleSelect(entry)} > {entry.title} {entry.section} ))} )} {groups.map(([section, entries]) => ( {entries.map(entry => renderItem(entry, 'all'))} ))} {/* The keyboard contract, stated. This is the section's whole positioning — a palette that supports arrow keys but never says so is indistinguishable from one that does not. */}

↑ ↓ navigate open esc close

) } ``` ### `storage/app/registry-sources/marketing/navbars/navbar-5/navbar-5-sidebar-sheet.tsx` ```tsx 'use client' import type { ReactNode } from 'react' import { Menu } from 'lucide-react' import { Button } from '@/components/ui/button' import { Separator } from '@/components/ui/separator' import { Sheet, SheetClose, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet' import { primaryLinks, sectionLinks } from "@/components/data/navbar-5-docs" import { Navbar5VersionSwitcher } from './navbar-5-version-switcher' export function Navbar5SidebarSheet({ themeToggle, version, onVersionChange, }: { themeToggle: ReactNode version: string onVersionChange: (value: string) => void }) { return ( } /> Documentation

{themeToggle}

) } ``` ### `storage/app/registry-sources/marketing/navbars/navbar-5/navbar-5-version-switcher.tsx` ```tsx 'use client' import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select' import { versions } from "@/components/data/navbar-5-docs" /** * Controlled by the header rather than holding its own state, so this and the mobile menu are two * views of one selection instead of two switchers that disagree the moment either is used. */ export function Navbar5VersionSwitcher({ value, onValueChange, }: { value: string onValueChange: (value: string) => void }) { const selected = versions.find(entry => entry.value === value) // Only the current release is guaranteed to have every page; say so rather than 404 later. const notice = selected && selected.value !== versions[0].value ? `This page may not exist in ${selected.label}.` : null return (

{notice ? (

{notice}

) : null}

) } ``` ### `storage/app/registry-sources/marketing/navbars/navbar-5/navbar-5-docs.ts` ```ts /** Synthetic Solaris (residential solar & home-energy platform) demo data. */ export type PrimaryLink = { label: string; href: string; active?: boolean } export const primaryLinks: PrimaryLink[] = [ { label: 'Guides', href: '#guides', active: true }, { label: 'API', href: '#api' }, { label: 'SDKs', href: '#sdks' }, { label: 'Changelog', href: '#changelog' }, ] export type SectionLink = { label: string; href: string; active?: boolean } export const sectionLinks: SectionLink[] = [ { label: 'Getting started', href: '#getting-started' }, { label: 'Authentication', href: '#authentication' }, { label: 'Sites', href: '#sites' }, { label: 'Production data', href: '#production-data', active: true }, { label: 'Webhooks', href: '#webhooks' }, ] export const breadcrumb = [ { label: 'Docs', href: '#docs' }, { label: 'API', href: '#api' }, { label: 'Production data', href: '#production-data' }, ] export type DocsVersion = { value: string; label: string; status: 'Current' | 'Maintenance' | 'Preview' } export const versions: DocsVersion[] = [ { value: 'v3.2', label: 'v3.2', status: 'Current' }, { value: 'v3.1', label: 'v3.1', status: 'Maintenance' }, { value: 'v3.0', label: 'v3.0', status: 'Maintenance' }, { value: 'next', label: 'Next', status: 'Preview' }, ] /** A real fetch point would replace this static figure — comment marks where. */ export const githubStarCount = 4100 export type SearchIndexEntry = { id: string; title: string; section: string; href: string } export const searchIndex: SearchIndexEntry[] = [ { id: 'getting-started', title: 'Getting started', section: 'Guides', href: '#getting-started' }, { id: 'authentication', title: 'Authentication', section: 'API', href: '#authentication' }, { id: 'sites', title: 'Sites', section: 'API', href: '#sites' }, { id: 'production-data', title: 'Production data', section: 'API', href: '#production-data' }, { id: 'webhooks', title: 'Webhooks', section: 'API', href: '#webhooks' }, { id: 'js-sdk', title: 'JavaScript SDK', section: 'SDKs', href: '#sdks' }, { id: 'python-sdk', title: 'Python SDK', section: 'SDKs', href: '#sdks' }, { id: 'changelog', title: 'Changelog', section: 'Changelog', href: '#changelog' }, ] /** Body copy for the preview wrapper only — not shipped as part of the header itself. */ export const docsPreviewSections = [ { heading: 'Authentication', body: 'Every request is authenticated with a site-scoped key. Keys are issued per environment and never expire on their own — rotate from the dashboard, then revoke the old key once traffic has moved.', code: 'curl https://api.solaris.dev/v3/sites/ste_8f21/production \\\n -H "Authorization: Bearer sk_live_..."', }, { heading: 'Intervals', body: 'Readings come back at five-minute resolution for the last 90 days and hourly beyond that. Ask for more than a year and the response is downsampled to daily totals rather than truncated.', code: 'GET /v3/sites/:id/production?from=2026-08-01&to=2026-08-17&resolution=hour', }, { heading: 'Gaps and backfill', body: 'An inverter that loses connectivity leaves a gap rather than a zero, so a missing reading is never mistaken for a night. On reconnect it backfills and the affected intervals are re-emitted on the webhook.', code: '{\n "interval": "2026-08-14T11:05:00Z",\n "watt_hours": null,\n "state": "missing"\n}', }, { heading: 'Rate limits', body: 'Sixty requests a minute per key, bursting to a hundred. The remaining budget is on every response and a 429 carries the seconds to wait — read it rather than backing off blindly.', code: 'X-RateLimit-Remaining: 41\nX-RateLimit-Reset: 27', }, ] ```