ExamplesNav() — ui Function Reference

Architecture documentation for the ExamplesNav() function in examples-nav.tsx from the ui codebase.

Function tsx ComponentRegistry UIPrimitives

Entity Profile

ComponentRegistry→ UIPrimitives→ ExamplesNav() — ui Function Reference

Dependency Diagram

graph TD
  54977e3b_b884_70d6_2428_2aef4cda7a29["ExamplesNav()"]
  1cf27d2b_e690_de0f_6137_33948a13de0c["examples-nav.tsx"]
  54977e3b_b884_70d6_2428_2aef4cda7a29 -->|defined in| 1cf27d2b_e690_de0f_6137_33948a13de0c
  style 54977e3b_b884_70d6_2428_2aef4cda7a29 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

deprecated/www/components/examples-nav.tsx lines 56–79

export function ExamplesNav({ className, ...props }: ExamplesNavProps) {
  const pathname = usePathname()

  return (
    <div className="relative">
      <ScrollArea className="max-w-[600px] lg:max-w-none">
        <div className={cn("flex items-center", className)} {...props}>
          <ExampleLink
            example={{ name: "Examples", href: "/", code: "", hidden: false }}
            isActive={pathname === "/"}
          />
          {examples.map((example) => (
            <ExampleLink
              key={example.href}
              example={example}
              isActive={pathname?.startsWith(example.href) ?? false}
            />
          ))}
        </div>
        <ScrollBar orientation="horizontal" className="invisible" />
      </ScrollArea>
    </div>
  )
}