ListItem() — ui Function Reference

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

Function tsx DocumentationAtlas Changelog

Entity Profile

DocumentationAtlas→ Changelog→ ListItem() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

apps/v4/examples/base/navigation-menu-demo.tsx lines 140–156

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