diff --git a/resources/js/components/router-link-menus/Breadcrumb.vue b/resources/js/components/router-link-menus/Breadcrumb.vue
index 6f24a8c4..be2811c2 100644
--- a/resources/js/components/router-link-menus/Breadcrumb.vue
+++ b/resources/js/components/router-link-menus/Breadcrumb.vue
@@ -23,7 +23,7 @@ defineExpose({ $el: childRef })
 <template>
     <Breadcrumb
         ref="child-ref"
-        v-bind="{ ...componentProps, pt: defaultPt, ptOptions: { mergeProps: ptViewMerge } }"
+        v-bind="{ ...componentProps, ...$attrs, pt: defaultPt, ptOptions: { mergeProps: ptViewMerge } }"
     >
         <template #item="{ item, props }">
             <InertiaLink
diff --git a/resources/js/components/router-link-menus/ContextMenu.vue b/resources/js/components/router-link-menus/ContextMenu.vue
index 7ce5cffd..84f474cb 100644
--- a/resources/js/components/router-link-menus/ContextMenu.vue
+++ b/resources/js/components/router-link-menus/ContextMenu.vue
@@ -23,7 +23,7 @@ defineExpose({
 <template>
     <ContextMenu
         ref="child-ref"
-        v-bind="{ ...componentProps, ptOptions: { mergeProps: ptViewMerge } }"
+        v-bind="{ ...componentProps, ...$attrs, ptOptions: { mergeProps: ptViewMerge } }"
     >
         <template #item="{ item, props, hasSubmenu }">
             <InertiaLink
diff --git a/resources/js/components/router-link-menus/Menu.vue b/resources/js/components/router-link-menus/Menu.vue
index 712ba275..2783cb08 100644
--- a/resources/js/components/router-link-menus/Menu.vue
+++ b/resources/js/components/router-link-menus/Menu.vue
@@ -22,7 +22,7 @@ defineExpose({
 <template>
     <Menu
         ref="child-ref"
-        v-bind="{ ...componentProps, ptOptions: { mergeProps: ptViewMerge } }"
+        v-bind="{ ...componentProps, ...$attrs, ptOptions: { mergeProps: ptViewMerge } }"
     >
         <template
             v-for="(_, slotName) in $slots"
diff --git a/resources/js/components/router-link-menus/Menubar.vue b/resources/js/components/router-link-menus/Menubar.vue
index eb53bdda..7e0cffe4 100644
--- a/resources/js/components/router-link-menus/Menubar.vue
+++ b/resources/js/components/router-link-menus/Menubar.vue
@@ -23,7 +23,7 @@ defineExpose({ $el: childRef })
 <template>
     <Menubar
         ref="child-ref"
-        v-bind="{ ...componentProps, ptOptions: { mergeProps: ptViewMerge } }"
+        v-bind="{ ...componentProps, ...$attrs, ptOptions: { mergeProps: ptViewMerge } }"
     >
         <template
             v-for="(_, slotName) in $slots"
diff --git a/resources/js/components/router-link-menus/PanelMenu.vue b/resources/js/components/router-link-menus/PanelMenu.vue
index d34ec4cb..cd34eb9e 100644
--- a/resources/js/components/router-link-menus/PanelMenu.vue
+++ b/resources/js/components/router-link-menus/PanelMenu.vue
@@ -26,7 +26,7 @@ defineExpose({ $el: childRef })
 <template>
     <PanelMenu
         ref="child-ref"
-        v-bind="{ ...componentProps, pt: defaultPt, ptOptions: { mergeProps: ptViewMerge } }"
+        v-bind="{ ...componentProps, ...$attrs, pt: defaultPt, ptOptions: { mergeProps: ptViewMerge } }"
     >
         <template #item="{ item, root, active, props, hasSubmenu }">
             <Divider
@@ -91,4 +91,4 @@ defineExpose({ $el: childRef })
             </a>
         </template>
     </PanelMenu>
-</template>
\ No newline at end of file
+</template>
diff --git a/resources/js/components/router-link-menus/TabMenu.vue b/resources/js/components/router-link-menus/TabMenu.vue
index 32931f9b..817c2d9e 100644
--- a/resources/js/components/router-link-menus/TabMenu.vue
+++ b/resources/js/components/router-link-menus/TabMenu.vue
@@ -3,15 +3,15 @@ import { useTemplateRef, computed } from 'vue'
 import { usePage, Link as InertiaLink } from '@inertiajs/vue3'
 import { route } from 'ziggy-js'
 import Tabs from 'primevue/tabs'
-import TabList, { type TabListProps } from 'primevue/tablist'
-import Tab from 'primevue/tab'
+import Tab, { type TabsProps } from 'primevue/tabs'
+import TabList from 'primevue/tablist'
 import type { MenuItem } from '@/types'
 import { ptViewMerge } from '@/utils'
 
-interface ExtendedTabListProps extends Omit<TabListProps, 'items'> {
-    items?: MenuItem[] | undefined;
+interface ExtendedTabsProps extends Omit<TabsProps, 'value' | 'items'> {
+    items: MenuItem[];
 }
-const componentProps = defineProps<ExtendedTabListProps>()
+const componentProps = defineProps<ExtendedTabsProps>()
 
 const page = usePage()
 const currentRoute = computed(() => {
@@ -30,7 +30,7 @@ defineExpose({ $el: childRef })
 <template>
     <Tabs
         ref="child-ref"
-        v-bind="{ ...componentProps, ptOptions: { mergeProps: ptViewMerge } }"
+        v-bind="{ ...componentProps, ...$attrs, ptOptions: { mergeProps: ptViewMerge } }"
         :value="currentRoute ?? '/'"
         scrollable
     >
@@ -39,15 +39,14 @@ defineExpose({ $el: childRef })
                 v-for="item in componentProps.items"
                 :key="item.route"
                 :href="item.route ?? ''"
-                :class="['no-underline', { 'p-tab-active': item.active }]"
+                :class="['p-tab no-underline', { 'p-tab-active': item.active }]"
                 custom
             >
                 <Tab
                     v-if="item.route"
                     :value="item.route"
                     :class="[
-                        'flex items-center gap-2 hover:text-color',
-                        item.active ? 'p-tab-active' : 'text-muted-color',
+                        'flex flex-row items-center gap-2 hover:text-color',
                         item.class
                     ]"
                     :style="item.style"
diff --git a/resources/js/components/router-link-menus/TieredMenu.vue b/resources/js/components/router-link-menus/TieredMenu.vue
index c8c1e66f..b1e32d96 100644
--- a/resources/js/components/router-link-menus/TieredMenu.vue
+++ b/resources/js/components/router-link-menus/TieredMenu.vue
@@ -20,7 +20,7 @@ defineExpose({ $el: childRef })
 <template>
     <TieredMenu
         ref="child-ref"
-        v-bind="{ ...componentProps, ptOptions: { mergeProps: ptViewMerge } }"
+        v-bind="{ ...componentProps, ...$attrs, ptOptions: { mergeProps: ptViewMerge } }"
     >
         <template
             v-for="(_, slotName) in $slots"
diff --git a/resources/js/composables/useAppLayout.ts b/resources/js/composables/useAppLayout.ts
index fef6b8be..c81a40a0 100644
--- a/resources/js/composables/useAppLayout.ts
+++ b/resources/js/composables/useAppLayout.ts
@@ -1,4 +1,4 @@
-import { ref, computed, onMounted, onUnmounted, watchEffect } from 'vue'
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
 import { usePage, useForm } from '@inertiajs/vue3'
 import { LayoutGrid, House, Info, Settings, LogOut, ExternalLink, FileSearch, FolderGit2 } from 'lucide-vue-next'
 import { MenuItem } from '@/types'
@@ -16,40 +16,47 @@ export function useAppLayout() {
     // Menu items
     const menuItems = computed<MenuItem[]>(() => [
         {
+            key: 'home',
             label: 'Home',
             lucideIcon: House,
             route: route('welcome'),
             active: currentRoute.value == 'welcome',
         },
         {
+            key: 'dashboard',
             label: 'Dashboard',
             lucideIcon: LayoutGrid,
             route: route('dashboard'),
             active: currentRoute.value == 'dashboard',
         },
         {
+            key: 'resources',
             label: 'Resources',
             lucideIcon: Info,
             items: [
                 {
+                    key: 'resources-laravel',
                     label: 'Laravel Docs',
                     url: 'https://laravel.com/docs/master',
                     target: '_blank',
                     lucideIcon: ExternalLink,
                 },
                 {
+                    key: 'resources-primevue',
                     label: 'PrimeVue Docs',
                     url: 'https://primevue.org/',
                     target: '_blank',
                     lucideIcon: ExternalLink,
                 },
                 {
+                    key: 'resources-starter-docs',
                     label: 'Starter Kit Docs',
                     url: 'https://connorabbas.github.io/laravel-primevue-starter-kit-docs/',
                     target: '_blank',
                     lucideIcon: FileSearch,
                 },
                 {
+                    key: 'resources-starter-repo',
                     label: 'Starter Kit Repo',
                     url: 'https://github.com/connorabbas/laravel-primevue-starter-kit',
                     target: '_blank',
@@ -59,7 +66,28 @@ export function useAppLayout() {
         },
     ])
 
-    // User menu and logout functionality.
+    // Check/set expanded PanelMenu items based on active status, for non-persistent layouts
+    const expandedKeys = ref<Record<string, boolean>>({})
+    const updateExpandedKeys = () => {
+        const keys: Record<string, boolean> = {}
+        const hasActiveChild = (item: MenuItem): boolean => {
+            if (item.items) {
+                for (const child of item.items) {
+                    if (hasActiveChild(child)) {
+                        if (item.key) keys[item.key] = true
+                        return true
+                    }
+                }
+            }
+            return !!item.active
+        }
+        menuItems.value.forEach(hasActiveChild)
+        expandedKeys.value = keys
+    }
+    watch(currentRoute, () => {
+        updateExpandedKeys()
+    }, { immediate: true })
+
     const logoutForm = useForm({})
     const logout = () => {
         logoutForm.post(route('logout'))
@@ -80,7 +108,7 @@ export function useAppLayout() {
         },
     ]
 
-    // Mobile menu
+    // Mobile drawer menu
     const mobileMenuOpen = ref(false)
     if (typeof window !== 'undefined') {
         const windowWidth = ref(window.innerWidth)
@@ -93,8 +121,8 @@ export function useAppLayout() {
         onUnmounted(() => {
             window.removeEventListener('resize', updateWidth)
         })
-        watchEffect(() => {
-            if (windowWidth.value > 1024) {
+        watch(windowWidth, (newWidth) => {
+            if (newWidth > 1024) {
                 mobileMenuOpen.value = false
             }
         })
@@ -103,6 +131,7 @@ export function useAppLayout() {
     return {
         currentRoute,
         menuItems,
+        expandedKeys,
         userMenuItems,
         mobileMenuOpen,
         logout,
diff --git a/resources/js/layouts/app/HeaderLayout.vue b/resources/js/layouts/app/HeaderLayout.vue
index 51b15341..62038446 100644
--- a/resources/js/layouts/app/HeaderLayout.vue
+++ b/resources/js/layouts/app/HeaderLayout.vue
@@ -23,6 +23,7 @@ const {
     currentRoute,
     mobileMenuOpen,
     menuItems,
+    expandedKeys,
     userMenuItems,
 } = useAppLayout()
 </script>
@@ -38,6 +39,7 @@ const {
                 >
                     <div>
                         <PanelMenu
+                            v-model:expandedKeys="expandedKeys"
                             :model="menuItems"
                             class="mt-1 w-full"
                         />
diff --git a/resources/js/layouts/app/SidebarLayout.vue b/resources/js/layouts/app/SidebarLayout.vue
index 9c7a55d9..ddbb72d1 100644
--- a/resources/js/layouts/app/SidebarLayout.vue
+++ b/resources/js/layouts/app/SidebarLayout.vue
@@ -21,6 +21,7 @@ const page = usePage()
 const {
     mobileMenuOpen,
     menuItems,
+    expandedKeys,
     userMenuItems,
 } = useAppLayout()
 </script>
@@ -36,6 +37,7 @@ const {
                 >
                     <div>
                         <PanelMenu
+                            v-model:expandedKeys="expandedKeys"
                             :model="menuItems"
                             class="mt-1 w-full"
                         />
@@ -96,6 +98,7 @@ const {
                         </div>
                         <div>
                             <PanelMenu
+                                v-model:expandedKeys="expandedKeys"
                                 :model="menuItems"
                                 class="mt-1 w-full"
                             />