NavMain() — ui Function Reference

Architecture documentation for the NavMain() function in nav-main.tsx from the ui codebase.

Function tsx ApplicationExhibition Authentication

Entity Profile

ApplicationExhibition→ Authentication→ NavMain() — ui Function Reference

Dependency Diagram

graph TD
  faa0e472_e8f5_b019_39c4_b3f039a3bf02["NavMain()"]
  70ce6f2d_87c1_3945_3e92_9f4346d3ad78["nav-main.tsx"]
  faa0e472_e8f5_b019_39c4_b3f039a3bf02 -->|defined in| 70ce6f2d_87c1_3945_3e92_9f4346d3ad78
  style faa0e472_e8f5_b019_39c4_b3f039a3bf02 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(app)/examples/dashboard/components/nav-main.tsx lines 14–40

export function NavMain({
  items,
}: {
  items: {
    title: string
    url: string
    icon?: Icon
  }[]
}) {
  return (
    <SidebarGroup>
      <SidebarGroupContent>
        <SidebarGroupLabel>Home</SidebarGroupLabel>
        <SidebarMenu>
          {items.map((item) => (
            <SidebarMenuItem key={item.title}>
              <SidebarMenuButton tooltip={item.title}>
                {item.icon && <item.icon />}
                <span>{item.title}</span>
              </SidebarMenuButton>
            </SidebarMenuItem>
          ))}
        </SidebarMenu>
      </SidebarGroupContent>
    </SidebarGroup>
  )
}