ListItem() — ui Function Reference

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

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ ListItem() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

apps/v4/registry/new-york-v4/examples/navigation-menu-demo.tsx lines 197–215

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>
  )
}