Composables
useXNavigation
Dashboard navigation state — sidebar items, header config, collapse state, and active-route tracking — driven by the xDashboard app config.
useXNavigation
Reactive navigation state for the dashboard layout. Reads its configuration from the consumer's app/app.config.ts under the xDashboard key (the file must live in app/, not the project root). Powers XALayout, XALayoutSidebar, XALayoutHeader, and the sidebar nav components.
Usage
const {
sidebarCollapsed,
toggleSidebar,
setSidebarCollapsed,
sidebarItems,
sidebarFooterItems,
topNavItems,
headerConfig,
isNavItemActive,
hasActiveChild,
currentSidebarWidth,
} = useXNavigation()
Configuration
// app/app.config.ts
export default defineAppConfig({
xDashboard: {
navigation: {
mode: 'sidebar',
sidebar: {
collapsible: true,
brand: { title: 'My App', logo: '/logo.svg', collapsedLogo: '/icon.svg' },
items: [
{ label: 'Dashboard', icon: 'i-lucide-layout-dashboard', to: '/' },
{ label: 'Users', icon: 'i-lucide-users', to: '/users' },
{
label: 'Settings',
icon: 'i-lucide-settings',
children: [
{ label: 'Profile', to: '/settings/profile' },
{ label: 'Security', to: '/settings/security' },
],
},
],
footerItems: [
{ label: 'Help', icon: 'i-lucide-help-circle', to: '/help' },
],
},
},
header: {
search: { enabled: true, shortcut: 'meta+k' },
actions: [
{ icon: 'i-lucide-bell', action: 'notifications', badge: 3 },
],
},
},
})
Returns
| Key | Type | Description |
|---|---|---|
sidebarCollapsed | Ref<boolean> | Whether the sidebar is collapsed (persisted). |
toggleSidebar / setSidebarCollapsed | functions | Collapse-state controls. |
sidebarItems / sidebarFooterItems | ComputedRef<NavItem[]> | Resolved sidebar navigation items. |
topNavItems | ComputedRef<NavItem[]> | Top-navigation items. |
headerConfig | ComputedRef<HeaderConfig> | Resolved header configuration (search, actions). |
isNavItemActive / hasActiveChild | functions | Active-route helpers for the current route. |
currentSidebarWidth | ComputedRef<string> | Current sidebar width (expanded vs collapsed). |
AI Context
composable: useXNavigation
package: "@xenterprises/nuxt-x-app"
use-when: >
Reading or controlling the dashboard sidebar/header navigation state,
or configuring the navigation tree via xDashboard in app.config.ts.