kb-navigation

What problem does it solve?

This Skill solves the problem of messy, inconsistent navigation implementations by centralizing how routes, RBAC visibility, feature flags, and badge counts are modeled for a Next.js App Router app.

Core Features & Use Cases

• Config-driven SSOT navigation: Define every nav item in a single typed config so updates require editing one place instead of multiple UI components.
• RBAC and feature-flag filtering at the config layer: Filter the navigation tree in one traversal before rendering to keep surfaces consistent across desktop and mobile.
• Badge counts via hook registry: Attach count “keys” to items and map them to dedicated hooks so data-fetch strategies stay decoupled from navigation UI.
• Mobile + desktop composition with overflow patterns: Build a desktop sidebar and a mobile bottom-nav plus “more” sheet from the same config.
• Collapsible groups and active-state propagation: Support nested groups with parent expansion when a child is active.

Quick Start

Use kb-navigation to model the navigation for your new feature by writing a single config list of nav items (including roles, feature flags, and badge keys) and then deriving the desktop sidebar and mobile bottom-nav from the filtered config.