TopNavigation() — supabase Function Reference

Architecture documentation for the TopNavigation() function in top-navigation.tsx from the supabase codebase.

Function tsx DesignSystem UIPatterns calls 1

Entity Profile

DesignSystem→ UIPatterns→ TopNavigation() — supabase Function Reference

Dependency Diagram

graph TD
  fb35871b_16c5_9c37_2c4c_99fc44ff608f["TopNavigation()"]
  56350b50_3ba0_3127_269f_6c6b1e7d60f5["useMobileSidebar()"]
  fb35871b_16c5_9c37_2c4c_99fc44ff608f -->|calls| 56350b50_3ba0_3127_269f_6c6b1e7d60f5
  style fb35871b_16c5_9c37_2c4c_99fc44ff608f fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/design-system/components/top-navigation.tsx lines 12–43

export const TopNavigation = () => {
  const { toggle } = useMobileSidebar()

  return (
    <header className="sticky top-0 z-50 w-full bg-studio/95 backdrop-blur supports-[backdrop-filter]:bg-studio/60 border-b border-l border-r">
      <nav className="py-3 w-full flex">
        <div className="max-w-site w-full flex flex-row items-center gap-6 mx-auto md:px-6 px-4 justify-between">
          <div className="flex items-center gap-2">
            <Button
              type="text"
              size="tiny"
              className="px-1 md:hidden"
              onClick={toggle}
              icon={<Menu size={16} />}
              aria-label="Toggle navigation menu"
            />
            <Link href="/" className="flex items-center lg:gap-6 gap-4">
              <h1 className="hidden md:flex line-clamp-1 lg:text-2xl text-xl">
                Supabase Design System
              </h1>
              <HomepageSvgHandler name="logo" className="h-4 w-auto" />
            </Link>
          </div>
          <div className="flex items-center gap-2">
            <CommandMenu />
            <ThemeSwitcherDropdown />
          </div>
        </div>
      </nav>
    </header>
  )
}