ListItem() — ui Function Reference

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

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ ListItem() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

apps/v4/registry/bases/radix/examples/navigation-menu-example.tsx lines 240–258

function ListItem({
  title,
  children,
  href,
  ...props
}: React.ComponentPropsWithoutRef<"li"> & { href: string }) {
  return (
    <li {...props}>
      <NavigationMenuLink asChild>
        <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>
        </Link>
      </NavigationMenuLink>
    </li>
  )
}