ModuleNav

Name: Helptribe Dubai
Address: Marina Plaza, Level 28, Dubai Marina, Dubai, AE
Telephone: +971 4 456 7890

Sidebar navigation for switching between ERP modules. Supports icons, active states, and customizable module lists.

Installation

$ npx shadcn@latest add module-nav

Preview

Core Modules

Usage (React/TSX)

"use client"
import { useState } from "react"
import { ModuleNav } from "@/components/ui/module-nav"
import { DollarSign, Users, Truck, LineChart } from "lucide-react"

const modules = [
  { id: "finance", name: "Finance Suite", icon: <DollarSign />, color: "text-blue-400" },
  { id: "hr", name: "HR Operations", icon: <Users />, color: "text-emerald-400" },
  { id: "logistics", name: "Logistics & Fleet", icon: <Truck />, color: "text-amber-400" },
  { id: "analytics", name: "Analytics & BI", icon: <LineChart />, color: "text-red-400" },
]

export default function Dashboard() {
  const [activeModule, setActiveModule] = useState("finance")

  return (
    <div className="flex min-h-screen">
      <ModuleNav
        modules={modules}
        activeId={activeModule}
        onModuleSelect={setActiveModule}
      />
      <main className="flex-1 p-6">
        {/* Render module content based on activeModule */}
      </main>
    </div>
  )
}

Props

Prop	Type	Default	Description
modules	ModuleNavItem[]	—	Array of module objects with id, name, icon, and optional color.
activeId	string	—	The currently active module ID.
onModuleSelect	(id: string) => void	—	Callback when a module is clicked.
label	string	"Core Modules"	Section label above the module list.
className	string	—	Additional CSS classes to apply.