ListItem() — ui Function Reference

Architecture documentation for the ListItem() function in navigation-menu-demo.tsx from the ui codebase.

Function tsx DocumentationAtlas ContentSourcing

Entity Profile

DocumentationAtlas→ ContentSourcing→ ListItem() — ui Function Reference

Dependency Diagram

graph TD
  104f93fc_d07c_0dba_29ff_b9e2b77c60c2["ListItem()"]
  dd1917c7_ae72_f39e_da51_c96daafdfe04["navigation-menu-demo.tsx"]
  104f93fc_d07c_0dba_29ff_b9e2b77c60c2 -->|defined in| dd1917c7_ae72_f39e_da51_c96daafdfe04
  style 104f93fc_d07c_0dba_29ff_b9e2b77c60c2 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(internal)/sink/components/navigation-menu-demo.tsx lines 209–227

function ListItem({
  title,
  children,
  href,
  ...props
}: React.ComponentPropsWithoutRef<"li"> & { href: string }) {
  return (
    <li {...props}>
      <NavigationMenuLink asChild>
        <Link href={href}>
          <div className="text-sm leading-none font-medium">{title}</div>
          <p className="text-muted-foreground line-clamp-2 text-sm leading-snug">
            {children}
          </p>
        </Link>
      </NavigationMenuLink>
    </li>
  )
}