Top Nav
Authenticated FFG app header with primary nav links, notification bell, and an avatar dropdown. Router-decoupled via onNavigate prop.
Installation
pnpm dlx shadcn@latest add @ffg/top-navUsage
"use client"
import { TopNav, type NavLinkItem } from "@/components/ui/top-nav"
const links: NavLinkItem[] = [
{ label: "Dashboard", href: "/dashboard", active: true },
{ label: "Organizations", href: "/organizations" },
]
<TopNav
links={links}
onNavigate={(href) => router.push(href)}
onSignOut={() => signOut()}
/>onNavigate receives the destination href; wire it to your router. logoSlot accepts any ReactNode to replace the default FFG monogram. The avatar dropdown exposes onSignOut. On narrow viewports the primary links collapse into a hamburger NavMenu. stuck adds sticky top-0 z-50.