diff --git a/resources/js/components/AppSidebar.vue b/resources/js/components/AppSidebar.vue
index 3ac41042..4f79ce0f 100644
--- a/resources/js/components/AppSidebar.vue
+++ b/resources/js/components/AppSidebar.vue
@@ -5,7 +5,7 @@ import NavUser from '@/components/NavUser.vue';
 import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
 import { type NavItem } from '@/types';
 import { Link } from '@inertiajs/vue3';
-import { BookOpen, Folder, LayoutGrid } from 'lucide-vue-next';
+import { BookOpen, Folder, LayoutGrid, Shield } from 'lucide-vue-next';
 import AppLogo from './AppLogo.vue';
 
 const mainNavItems: NavItem[] = [
@@ -14,6 +14,31 @@ const mainNavItems: NavItem[] = [
         href: '/dashboard',
         icon: LayoutGrid,
     },
+
+    /*
+    Example Navigation Item with Children:
+    Uncomment the block below to see how to create a menu item with children
+    */
+
+    //     {
+    //     title: 'User Management',
+    //     href: '#',
+    //     icon: Shield,
+    //     children: [
+    //       {
+    //         title: 'Roles',
+    //         href: '#',
+    //       },
+    //       {
+    //         title: 'Permissions',
+    //         href: '#',
+    //       },
+    //       {
+    //         title: 'Users',
+    //         href: '#',
+    //       },
+    //     ],
+    //   },
 ];
 
 const footerNavItems: NavItem[] = [
@@ -37,7 +62,7 @@ const footerNavItems: NavItem[] = [
                 <SidebarMenuItem>
                     <SidebarMenuButton size="lg" as-child>
                         <Link :href="route('dashboard')">
-                            <AppLogo />
+                        <AppLogo />
                         </Link>
                     </SidebarMenuButton>
                 </SidebarMenuItem>
diff --git a/resources/js/components/Breadcrumbs.vue b/resources/js/components/Breadcrumbs.vue
index 92fe6ced..b1fcb63c 100644
--- a/resources/js/components/Breadcrumbs.vue
+++ b/resources/js/components/Breadcrumbs.vue
@@ -1,10 +1,16 @@
 <script setup lang="ts">
 import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from '@/components/ui/breadcrumb';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
+
+import { BreadcrumbItemType } from '@/types';
 import { Link } from '@inertiajs/vue3';
+import { ChevronDown } from 'lucide-vue-next'
+
 
 interface BreadcrumbItem {
     title: string;
     href?: string;
+    subItem?: BreadcrumbItem[]
 }
 
 defineProps<{
@@ -20,9 +26,28 @@ defineProps<{
                     <template v-if="index === breadcrumbs.length - 1">
                         <BreadcrumbPage>{{ item.title }}</BreadcrumbPage>
                     </template>
+                    <template v-else-if="item.subItems">
+                        <DropdownMenu>
+                            <DropdownMenuTrigger class="flex items-center gap-1">
+                                {{ item.title }}
+                                <ChevronDown class="h-4 w-4" />
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent align="start">
+                                <template v-for="(subItem, subIndex) in item.subItems" :key="subIndex">
+                                    <DropdownMenuItem>
+                                        <Link :href="subItem.href ?? '#'">
+                                        {{ subItem.title }}
+                                        </Link>
+                                    </DropdownMenuItem>
+                                </template>
+                            </DropdownMenuContent>
+                        </DropdownMenu>
+                    </template>
                     <template v-else>
                         <BreadcrumbLink as-child>
-                            <Link :href="item.href ?? '#'">{{ item.title }}</Link>
+                            <Link :href="item.href ?? '#'">
+                            {{ item.title }}
+                            </Link>
                         </BreadcrumbLink>
                     </template>
                 </BreadcrumbItem>
diff --git a/resources/js/components/NavMain.vue b/resources/js/components/NavMain.vue
index 8aa7d240..79c04ae9 100644
--- a/resources/js/components/NavMain.vue
+++ b/resources/js/components/NavMain.vue
@@ -1,30 +1,64 @@
 <script setup lang="ts">
-import { SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
+import { SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem } from '@/components/ui/sidebar'
 import { type NavItem, type SharedData } from '@/types';
 import { Link, usePage } from '@inertiajs/vue3';
+import { ChevronRight } from 'lucide-vue-next'
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from './ui/collapsible'
 
 defineProps<{
     items: NavItem[];
 }>();
 
 const page = usePage<SharedData>();
+
+function isChildActive(item: { children: any[], href: string }) {
+    return item.children?.some(child => child.href === page.url) || item.href === page.url
+}
 </script>
 
 <template>
     <SidebarGroup class="px-2 py-0">
         <SidebarGroupLabel>Platform</SidebarGroupLabel>
         <SidebarMenu>
-            <SidebarMenuItem v-for="item in items" :key="item.title">
-                <SidebarMenuButton 
-                    as-child :is-active="item.href === page.url"
-                    :tooltip="item.title"
-                >
-                    <Link :href="item.href">
+            <template v-for="item in items" :key="item.title">
+                <!-- Regular items (no children) -->
+                <SidebarMenuItem v-if="!item.children">
+                    <SidebarMenuButton as-child :is-active="item.href === page.url" :tooltip="item.title">
+                        <Link :href="item.href">
                         <component :is="item.icon" />
                         <span>{{ item.title }}</span>
-                    </Link>
-                </SidebarMenuButton>
-            </SidebarMenuItem>
+                        </Link>
+                    </SidebarMenuButton>
+                </SidebarMenuItem>
+
+                <!-- Collapsible items (with children) -->
+                <Collapsible v-else :default-open="isChildActive({ children: item.children || [], href: item.href })"
+                    class="group/collapsible">
+                    <SidebarMenuItem>
+                        <CollapsibleTrigger as-child>
+                            <SidebarMenuButton
+                                :is-active="isChildActive({ children: item.children || [], href: item.href })"
+                                :tooltip="item.title">
+                                <component :is="item.icon" v-if="item.icon" />
+                                <span>{{ item.title }}</span>
+                                <ChevronRight
+                                    class="ml-auto group-data-[state=open]/collapsible:rotate-90 transition-transform duration-200" />
+                            </SidebarMenuButton>
+                        </CollapsibleTrigger>
+                        <CollapsibleContent>
+                            <SidebarMenuSub>
+                                <SidebarMenuSubItem v-for="subItem in item.children" :key="subItem.title">
+                                    <SidebarMenuSubButton as-child :is-active="subItem.href === page.url">
+                                        <Link :href="subItem.href">
+                                        <span>{{ subItem.title }}</span>
+                                        </Link>
+                                    </SidebarMenuSubButton>
+                                </SidebarMenuSubItem>
+                            </SidebarMenuSub>
+                        </CollapsibleContent>
+                    </SidebarMenuItem>
+                </Collapsible>
+            </template>
         </SidebarMenu>
     </SidebarGroup>
 </template>
diff --git a/resources/js/types/index.d.ts b/resources/js/types/index.d.ts
index 853da1d9..9f127f2a 100644
--- a/resources/js/types/index.d.ts
+++ b/resources/js/types/index.d.ts
@@ -7,8 +7,9 @@ export interface Auth {
 }
 
 export interface BreadcrumbItem {
-    title: string;
-    href: string;
+    title: string
+    href: string
+    subItems?: BreadcrumbItem[]
 }
 
 export interface NavItem {
@@ -16,6 +17,7 @@ export interface NavItem {
     href: string;
     icon?: LucideIcon;
     isActive?: boolean;
+    children?: NavItem[];
 }
 
 export interface SharedData extends PageProps {