DocsNav() — ui Function Reference

Architecture documentation for the DocsNav() function in docs-nav.tsx from the ui codebase.

Function tsx ComponentRegistry UIPrimitives

Entity Profile

ComponentRegistry→ UIPrimitives→ DocsNav() — ui Function Reference

Dependency Diagram

graph TD
  f761bc51_5318_4f00_34e5_004c7b4e94d9["DocsNav()"]
  1273d0bf_53e4_2800_7b23_666a52cfde0e["docs-nav.tsx"]
  f761bc51_5318_4f00_34e5_004c7b4e94d9 -->|defined in| 1273d0bf_53e4_2800_7b23_666a52cfde0e
  style f761bc51_5318_4f00_34e5_004c7b4e94d9 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

deprecated/www/components/docs-nav.tsx lines 10–34

export function DocsNav({ config }: { config: DocsConfig }) {
  const pathname = usePathname()

  const items = config.sidebarNav

  return items.length ? (
    <div className="flex flex-col gap-6">
      {items.map((item, index) => (
        <div key={index} className="flex flex-col gap-1">
          <h4 className="rounded-md px-2 py-1 text-sm font-medium">
            {item.title}{" "}
            {item.label && (
              <span className="ml-2 rounded-md bg-[#adfa1d] px-1.5 py-0.5 text-xs font-normal leading-none text-[#000000] no-underline group-hover:no-underline">
                {item.label}
              </span>
            )}
          </h4>
          {item?.items?.length && (
            <DocsNavItems items={item.items} pathname={pathname} />
          )}
        </div>
      ))}
    </div>
  ) : null
}