ListItem() — ui Function Reference

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

Function tsx ComponentRegistry UIPrimitives

Entity Profile

ComponentRegistry→ UIPrimitives→ ListItem() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

apps/v4/registry/bases/base/examples/navigation-menu-example.tsx lines 169–185

function ListItem({
  title,
  children,
  href,
  ...props
}: React.ComponentPropsWithoutRef<"li"> & { href: string }) {
  return (
    <li {...props}>
      <NavigationMenuLink render={<Link href={href} />}>
        <div className="style-vega:text-sm style-maia:text-sm style-nova:text-sm style-lyra:text-xs style-mira:text-xs flex flex-col gap-1">
          <div className="leading-none font-medium">{title}</div>
          <div className="text-muted-foreground line-clamp-2">{children}</div>
        </div>
      </NavigationMenuLink>
    </li>
  )
}