NavHeader() — ui Function Reference

Architecture documentation for the NavHeader() function in nav-header.tsx from the ui codebase.

Function tsx Internationalization RTLLayout

Entity Profile

Internationalization→ RTLLayout→ NavHeader() — ui Function Reference

Dependency Diagram

graph TD
  8d4b3ea7_263c_b3d4_5cf7_bc556f6a96e3["NavHeader()"]
  2b65316c_ee0a_cf8b_8c6d_0ead98a6c083["nav-header.tsx"]
  8d4b3ea7_263c_b3d4_5cf7_bc556f6a96e3 -->|defined in| 2b65316c_ee0a_cf8b_8c6d_0ead98a6c083
  style 8d4b3ea7_263c_b3d4_5cf7_bc556f6a96e3 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/components/nav-header.tsx lines 13–37

export function NavHeader() {
  const pathname = usePathname()

  return (
    <NavigationMenu className="hidden sm:flex">
      <NavigationMenuList className="gap-2 *:data-[slot=navigation-menu-item]:h-7 **:data-[slot=navigation-menu-link]:py-1 **:data-[slot=navigation-menu-link]:font-medium">
        <NavigationMenuItem>
          <NavigationMenuLink asChild data-active={pathname === "/"}>
            <Link href="/">Home</Link>
          </NavigationMenuLink>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuLink asChild data-active={pathname === "/charts"}>
            <Link href="/charts">Charts</Link>
          </NavigationMenuLink>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuLink asChild data-active={pathname === "/forms"}>
            <Link href="/forms">Forms</Link>
          </NavigationMenuLink>
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  )
}