feat(ui): add nested navigation branches

README.md

@@ -35,7 +35,7 @@ The package expects React 19 and Tailwind CSS 4. Install an exact release so a
 consumer upgrades deliberately:
 
 ```bash
-pnpm add --save-exact @nextide/ui@2.0.0
+pnpm add --save-exact @nextide/ui@2.1.0
 pnpm add --save-dev --save-exact tailwindcss@4.3.1 @tailwindcss/vite@4.3.1
 ```
 

apps/playground/src/App.tsx

@@ -23,6 +23,7 @@ import {
   PanelRightClose,
   PanelRightOpen,
   PanelLeft,
+  Plus,
   RadioTower,
   Search,
   Settings,
@@ -47,7 +48,10 @@ import {
 } from "@nextide/ui/blocks/intelligence-progression-chart"
 import { SignalPlate } from "@nextide/ui/blocks/signal-plate"
 import { LiveguardCockpit } from "@nextide/ui/blocks/liveguard-cockpit"
-import { NavigationPanel } from "@nextide/ui/blocks/navigation-panel"
+import {
+  NavigationPanel,
+  defaultNavigationPanelSections,
+} from "@nextide/ui/blocks/navigation-panel"
 import { ProgressiveSummaryRail } from "@nextide/ui/blocks/progressive-summary-rail"
 import {
   ReportContextBuilder,
@@ -969,6 +973,8 @@ const blockPreviewNavigationLabels: Record<string, string> = {
   creators: "Creators",
   settings: "Settings",
   "service-health": "Service Health",
+  "summer-launch": "Summer launch",
+  "partner-rollout": "Partner rollout",
 }
 
 type PlaygroundState = {
@@ -2959,6 +2965,24 @@ function BlockPreview({ motionScale }: { motionScale: number }) {
     (_current: string, nextItemId: string) => nextItemId,
     "dashboard"
   )
+  const [campaignsExpanded, setCampaignsExpanded] = useState(false)
+  const [navigationActionCount, setNavigationActionCount] = useState(0)
+  const navigationSections = defaultNavigationPanelSections.map((section) => ({
+    ...section,
+    items: section.items.map((item) =>
+      item.id === "campaigns"
+        ? {
+            ...item,
+            expanded: campaignsExpanded,
+            action: { label: "Create campaign", icon: <Plus /> },
+            children: [
+              { id: "summer-launch", label: "Summer launch" },
+              { id: "partner-rollout", label: "Partner rollout" },
+            ],
+          }
+        : item
+    ),
+  }))
   const activeNavigationLabel =
     blockPreviewNavigationLabels[activeNavigationItemId] ?? "Dashboard"
 
@@ -3077,6 +3101,7 @@ function BlockPreview({ motionScale }: { motionScale: number }) {
             collapsed={navigationDrawer.iconsCollapsed}
             drawerCollapsed={navigationDrawer.drawerCollapsed}
             drawerTransitioning={navigationDrawer.transitioning}
+            sections={navigationSections}
             commandShortcut=""
             footer={
               <div className="grid gap-2 text-xs text-muted-foreground">
@@ -3085,6 +3110,8 @@ function BlockPreview({ motionScale }: { motionScale: number }) {
               </div>
             }
             onSelectItem={(item) => updateActiveNavigationItemId(item.id)}
+            onActionItem={() => setNavigationActionCount((count) => count + 1)}
+            onToggleItem={() => setCampaignsExpanded((expanded) => !expanded)}
             onToggle={navigationDrawer.toggleCollapsed}
           />
         </div>
@@ -3103,7 +3130,17 @@ function BlockPreview({ motionScale }: { motionScale: number }) {
                 {activeNavigationLabel}
               </strong>
             </div>
-            <StatusBadge tone="success">Nominal</StatusBadge>
+            <div className="grid justify-items-end gap-1">
+              <StatusBadge tone="success">Nominal</StatusBadge>
+              <span
+                aria-live="polite"
+                className="text-ui-caption text-muted-foreground"
+              >
+                {navigationActionCount
+                  ? `Create campaign requested ${navigationActionCount} ${navigationActionCount === 1 ? "time" : "times"}`
+                  : "No action requested"}
+              </span>
+            </div>
           </div>
           <div className="mt-5 grid [grid-template-columns:repeat(auto-fit,minmax(min(100%,10rem),1fr))] gap-3">
             <Metric

docs/component-map.md

@@ -98,8 +98,12 @@ In compact mode the icon opens that same field beside the rail without expanding
 the full sidebar. Matching is deliberately conservative and requires direct text
 matches across labels and their visible context. Selection navigates through
 `onSelectItem`, while Escape and outside clicks clear the query. Pass an empty
-`commandShortcut` when a secondary panel must not
-register the global shortcut.
+`commandShortcut` when a secondary panel must not register the global shortcut.
+
+Navigation items can expose one level of `children`, an `expanded` state, and a
+separate `action`. Use `onToggleItem` for disclosure and `onActionItem` for the
+item action so opening a saved destination, opening its workspace, and creating
+a new record remain distinct controls. Closed children remain searchable.
 
 Collapsed navigation controls use the same 44px icon track and hit area. Their
 final positions are measured before the layout changes so every control follows

packages/ui/README.md

@@ -8,7 +8,7 @@ shadcn/ui, Base UI, Tailwind CSS 4, and React 19.
 Pin an exact release so upgrades remain deliberate:
 
 ```bash
-pnpm add --save-exact @nextide/ui@2.0.0
+pnpm add --save-exact @nextide/ui@2.1.0
 pnpm add --save-dev --save-exact tailwindcss@4.3.1 @tailwindcss/vite@4.3.1
 ```
 

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextide/ui",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "Shared Nextide React components and product interface patterns.",
   "type": "module",
   "license": "UNLICENSED",