@vuecs/navigation

@vuecs/navigation

Multi-level navigation for Vue 3, part of vuecs. Each <VCNavItems> owns its items via a :data prop (plain array, sync fn, or async resolver), and dependent navs coordinate through a shared reactive registry — header tabs that swap a sidebar with zero app wiring.

✨ What's inside

• 🗂️ :data-driven — pass NavigationItem[], a function, or an async resolver receiving { path, registry }; reactive reads retrigger automatically, refresh() for imperative re-runs.
• 📡 Reactive registry — a nav publishes its resolved tree under a registry-id; other navs read it (items, active, activeTrail) and derive their own list. The canonical header → sidebar pattern.
• 🎯 Three active concepts — active (exact leaf, best path-score match), activeWithin (ancestor highlight + auto-open), activeTrail (root → leaf chain). Url-less items become click-driven section switchers.
• 📐 Submenu modes — collapse (inline Collapsible), dropdown (Reka NavigationMenu flyout), or auto; full arrow / Home / End keyboard navigation.
• 🧭 Router-optional — soft-reads vue-router's $route when present; works router-free with an explicit :path.
• 🪜 <VCStepper> compound — Stepper / Item / Trigger / Indicator / Title / Description / Separator on Reka's Stepper, for wizards and checkout flows, with linear-mode gating.

📦 Installation

npm install @vuecs/navigation

⚡ Usage

<VCNavItems
    :data="[
        { name: 'Dashboard', url: '/', icon: 'lucide:home' },
        {
            name: 'Settings',
            icon: 'lucide:settings',
            children: [
                { name: 'Profile', url: '/settings/profile' },
                { name: 'Security', url: '/settings/security' },
            ],
        },
    ]"
/>

<!-- dependent navs: top bar publishes, sidebar derives -->
<VCNavItems :data="topItems" registry registry-id="top" />
<VCNavItems :data="({ registry }) => registry('top').active.value[0]?.children ?? []" />

📚 Documentation

Navigation component · Navigation guide · Stepper

License

Made with 💚

Published under Apache 2.0 License.