SidebarNav() — ui Function Reference

Architecture documentation for the SidebarNav() function in sidebar-nav.tsx from the ui codebase.

Function tsx ComponentRegistry UIPrimitives

Entity Profile

ComponentRegistry→ UIPrimitives→ SidebarNav() — ui Function Reference

Dependency Diagram

graph TD
  aeef2eb6_7ab2_0e6d_cf05_503f69a413e5["SidebarNav()"]
  4991b21a_7620_d5b8_e2fb_243a71be7282["sidebar-nav.tsx"]
  aeef2eb6_7ab2_0e6d_cf05_503f69a413e5 -->|defined in| 4991b21a_7620_d5b8_e2fb_243a71be7282
  style aeef2eb6_7ab2_0e6d_cf05_503f69a413e5 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

deprecated/www/app/(app)/examples/forms/components/sidebar-nav.tsx lines 16–44

export function SidebarNav({ className, items, ...props }: SidebarNavProps) {
  const pathname = usePathname()

  return (
    <nav
      className={cn(
        "flex space-x-2 lg:flex-col lg:space-x-0 lg:space-y-1",
        className
      )}
      {...props}
    >
      {items.map((item) => (
        <Link
          key={item.href}
          href={item.href}
          className={cn(
            buttonVariants({ variant: "ghost" }),
            pathname === item.href
              ? "bg-muted hover:bg-muted"
              : "hover:bg-transparent hover:underline",
            "justify-start"
          )}
        >
          {item.title}
        </Link>
      ))}
    </nav>
  )
}