diff --git a/README.md b/README.md
index cbef2cf..2337b7c 100644
--- a/README.md
+++ b/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
 ```
 
diff --git a/apps/playground/src/App.tsx b/apps/playground/src/App.tsx
index 9ba2e32..cf5a162 100644
--- a/apps/playground/src/App.tsx
+++ b/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
diff --git a/docs/component-map.md b/docs/component-map.md
index 2e1bf54..83faa53 100644
--- a/docs/component-map.md
+++ b/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
diff --git a/packages/ui/README.md b/packages/ui/README.md
index a22bf44..8866db7 100644
--- a/packages/ui/README.md
+++ b/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
 ```
 
diff --git a/packages/ui/package.json b/packages/ui/package.json
index e0b9312..3f325a7 100644
--- a/packages/ui/package.json
+++ b/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",
diff --git a/packages/ui/src/blocks/navigation-panel.tsx b/packages/ui/src/blocks/navigation-panel.tsx
index 940bc3d..b53746a 100644
--- a/packages/ui/src/blocks/navigation-panel.tsx
+++ b/packages/ui/src/blocks/navigation-panel.tsx
@@ -1,5 +1,6 @@
 import * as React from "react"
 import {
+  ChevronDown,
   Handshake,
   HeartPulse,
   LayoutDashboard,
@@ -45,6 +46,12 @@ type NavigationPanelItem = {
   status?: string
   tone?: NavigationPanelStatusTone
   icon?: React.ReactNode
+  children?: NavigationPanelItem[]
+  expanded?: boolean
+  action?: {
+    label: string
+    icon?: React.ReactNode
+  }
 }
 
 type NavigationPanelSection = {
@@ -55,6 +62,8 @@ type NavigationPanelSection = {
 
 type NavigationPanelSearchItem = NavigationPanelItem & {
   sectionLabel?: string
+  parent?: NavigationPanelItem
+  actionFor?: NavigationPanelItem
 }
 
 type NavigationPanelUserMenu = Omit<
@@ -129,6 +138,8 @@ type NavigationPanelProps = React.ComponentProps<typeof Surface> & {
   commandShortcut?: string
   onToggle?: () => void
   onSelectItem: (item: NavigationPanelItem) => void
+  onToggleItem?: (item: NavigationPanelItem) => void
+  onActionItem?: (item: NavigationPanelItem) => void
   footer?: React.ReactNode
   userMenu?: NavigationPanelUserMenu
 }
@@ -140,6 +151,8 @@ type NavigationPanelCommandRowProps = {
   commandLabel: string
   commandShortcut?: string
   onSelectItem: (item: NavigationPanelItem) => void
+  onToggleItem?: (item: NavigationPanelItem) => void
+  onActionItem?: (item: NavigationPanelItem) => void
   onToggle?: () => void
 }
 
@@ -150,6 +163,8 @@ type NavigationPanelNavProps = {
   drawerCollapsed: boolean
   drawerTransitioning: boolean
   onSelectItem: (item: NavigationPanelItem) => void
+  onToggleItem?: (item: NavigationPanelItem) => void
+  onActionItem?: (item: NavigationPanelItem) => void
 }
 
 type NavigationPanelFooterProps = {
@@ -166,6 +181,8 @@ function NavigationPanelCommandRow({
   commandLabel,
   commandShortcut,
   onSelectItem,
+  onToggleItem,
+  onActionItem,
   onToggle,
 }: NavigationPanelCommandRowProps) {
   const [searchFocused, setSearchFocused] = React.useState(false)
@@ -179,12 +196,27 @@ function NavigationPanelCommandRow({
   const searchItems = React.useMemo(
     () =>
       sections.flatMap((section) =>
-        section.items.map((item) => ({
-          ...item,
-          sectionLabel: section.label,
-        }))
+        section.items.flatMap((item) => [
+          { ...item, sectionLabel: section.label },
+          ...(item.children ?? []).map((child) => ({
+            ...child,
+            sectionLabel: section.label,
+            parent: item,
+          })),
+          ...(item.action && onActionItem
+            ? [
+                {
+                  ...item,
+                  label: item.action.label,
+                  icon: item.action.icon,
+                  sectionLabel: section.label,
+                  actionFor: item,
+                },
+              ]
+            : []),
+        ])
       ),
-    [sections]
+    [onActionItem, sections]
   )
   const showSearchResults = searchFocused && searchValue.trim().length > 0
 
@@ -363,11 +395,22 @@ function NavigationPanelCommandRow({
 
                 return (
                   <AutocompleteItem
-                    key={item.id}
+                    key={
+                      item.actionFor
+                        ? `action:${item.actionFor.id}`
+                        : `item:${item.id}`
+                    }
                     value={item}
                     className="min-h-11 py-2"
                     onClick={() => {
-                      onSelectItem(item)
+                      if (item.actionFor) {
+                        onActionItem?.(item.actionFor)
+                      } else if (item.parent && !item.parent.expanded) {
+                        onToggleItem?.(item.parent)
+                        onSelectItem(item)
+                      } else {
+                        onSelectItem(item)
+                      }
                       clearSearch()
                     }}
                   >
@@ -400,6 +443,8 @@ function NavigationPanelNav({
   drawerCollapsed,
   drawerTransitioning,
   onSelectItem,
+  onToggleItem,
+  onActionItem,
 }: NavigationPanelNavProps) {
   const { ref: navRef, onWheel } = useContainedScroll<HTMLElement>({
     axis: "auto",
@@ -409,7 +454,13 @@ function NavigationPanelNav({
   const itemAnimationsRef = React.useRef<Record<string, Animation>>({})
   const railRef = React.useRef<HTMLSpanElement | null>(null)
   const railAnimationRef = React.useRef<Animation | null>(null)
-  const previousCollapsedRef = React.useRef(collapsed)
+  const compact = collapsed || drawerCollapsed
+  const effectiveActiveItemId = getEffectiveNavigationItemId(
+    sections,
+    activeItemId,
+    compact
+  )
+  const previousCompactRef = React.useRef(compact)
   const writeOutlineVars = React.useCallback(
     (
       top: number,
@@ -471,15 +522,14 @@ function NavigationPanelNav({
     if (!nav) return
 
     const nextRects: Record<string, DOMRect> = {}
-    for (const section of sections) {
-      for (const item of section.items) {
-        const element = itemRefs.current[item.id]
-        if (element) nextRects[item.id] = readNavigationItemMotionRect(element)
-      }
+    const visibleItems = getVisibleNavigationPanelItems(sections)
+    for (const item of visibleItems) {
+      const element = itemRefs.current[item.id]
+      if (element) nextRects[item.id] = readNavigationItemMotionRect(element)
     }
 
     const previousRects = itemRectsRef.current
-    const stateChanged = previousCollapsedRef.current !== collapsed
+    const stateChanged = previousCompactRef.current !== compact
     const reducedMotion =
       window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false
 
@@ -496,7 +546,9 @@ function NavigationPanelNav({
         styles.getPropertyValue("--nextide-drawer-icon-duration"),
         160
       )
-      const activeElement = activeItemId ? itemRefs.current[activeItemId] : null
+      const activeElement = effectiveActiveItemId
+        ? itemRefs.current[effectiveActiveItemId]
+        : null
       const previousRailTop = Number.parseFloat(
         nav.style.getPropertyValue("--navigation-rail-top")
       )
@@ -506,35 +558,33 @@ function NavigationPanelNav({
         nav.style.getPropertyValue("--navigation-rail-top")
       )
 
-      for (const section of sections) {
-        for (const item of section.items) {
-          const element = itemRefs.current[item.id]
-          const previousRect = previousRects[item.id]
-          const nextRect = nextRects[item.id]
-          if (!element || !previousRect || !nextRect) continue
-
-          const deltaY = previousRect.top - nextRect.top
-          if (Math.abs(deltaY) < 0.5) continue
-
-          const animation = element.animate(
-            [
-              { transform: `translate3d(0, ${deltaY}px, 0)` },
-              { transform: "translate3d(0, 0, 0)" },
-            ],
-            {
-              duration,
-              easing: "cubic-bezier(0.25, 1, 0.5, 1)",
-            }
-          )
-
-          itemAnimationsRef.current[item.id] = animation
-          void animation.finished
-            .then(() => {
-              if (itemAnimationsRef.current[item.id] !== animation) return
-              delete itemAnimationsRef.current[item.id]
-            })
-            .catch(() => undefined)
-        }
+      for (const item of visibleItems) {
+        const element = itemRefs.current[item.id]
+        const previousRect = previousRects[item.id]
+        const nextRect = nextRects[item.id]
+        if (!element || !previousRect || !nextRect) continue
+
+        const deltaY = previousRect.top - nextRect.top
+        if (Math.abs(deltaY) < 0.5) continue
+
+        const animation = element.animate(
+          [
+            { transform: `translate3d(0, ${deltaY}px, 0)` },
+            { transform: "translate3d(0, 0, 0)" },
+          ],
+          {
+            duration,
+            easing: "cubic-bezier(0.25, 1, 0.5, 1)",
+          }
+        )
+
+        itemAnimationsRef.current[item.id] = animation
+        void animation.finished
+          .then(() => {
+            if (itemAnimationsRef.current[item.id] !== animation) return
+            delete itemAnimationsRef.current[item.id]
+          })
+          .catch(() => undefined)
       }
 
       if (
@@ -568,7 +618,7 @@ function NavigationPanelNav({
     }
 
     itemRectsRef.current = nextRects
-    previousCollapsedRef.current = collapsed
+    previousCompactRef.current = compact
 
     return () => {
       for (const animation of Object.values(itemAnimationsRef.current)) {
@@ -578,13 +628,15 @@ function NavigationPanelNav({
       railAnimationRef.current?.cancel()
       railAnimationRef.current = null
     }
-  }, [activeItemId, collapsed, measureOutline, navRef, sections])
+  }, [compact, effectiveActiveItemId, measureOutline, navRef, sections])
 
   React.useLayoutEffect(() => {
     const nav = navRef.current
     if (!nav) return
 
-    const activeItem = activeItemId ? itemRefs.current[activeItemId] : null
+    const activeItem = effectiveActiveItemId
+      ? itemRefs.current[effectiveActiveItemId]
+      : null
     if (!activeItem) {
       const top =
         Number.parseFloat(
@@ -625,7 +677,7 @@ function NavigationPanelNav({
       window.removeEventListener("resize", scheduleMeasureOutline)
     }
   }, [
-    activeItemId,
+    effectiveActiveItemId,
     drawerTransitioning,
     measureOutline,
     navRef,
@@ -708,91 +760,235 @@ function NavigationPanelNav({
             <div className="grid gap-1.5 max-lg:flex">
               {section.items.map((item) => {
                 const active = item.id === activeItemId
+                const activeChild = item.children?.find(
+                  (child) => child.id === activeItemId
+                )
+                const branchActive = Boolean(activeChild)
+                const hasChildren = Boolean(item.children?.length)
+                const compactChildActive =
+                  branchActive && (collapsed || drawerCollapsed)
 
                 return (
-                  <button
+                  <div
                     key={item.id}
-                    type="button"
-                    ref={(node) => {
-                      itemRefs.current[item.id] = node
-                    }}
-                    className={cn(
-                      "group relative grid min-h-11 w-full items-center gap-2 rounded-lg border border-transparent text-left transition-[color,background-color] duration-[var(--nextide-motion-control)] ease-[var(--nextide-ease-out-quart)] motion-reduce:transition-none max-lg:h-11 max-lg:w-auto max-lg:min-w-max max-lg:grid-cols-[2rem_minmax(0,1fr)] max-lg:pr-3",
-                      collapsed ? "h-11" : "h-[3.25rem]",
-                      collapsed
-                        ? "mr-auto w-11 grid-cols-[2.75rem_0fr] gap-0 p-0"
-                        : "grid-cols-[2.75rem_minmax(0,1fr)] p-0",
-                      active
-                        ? "text-foreground max-lg:bg-nextide-tide/[0.07]"
-                        : "text-muted-foreground hover:bg-nextide-panel-strong/70 hover:text-foreground"
-                    )}
-                    aria-current={active ? "page" : undefined}
-                    aria-label={
-                      collapsed || drawerCollapsed
-                        ? [item.label, item.status, item.meta]
-                            .filter(Boolean)
-                            .join(" ")
-                        : undefined
-                    }
-                    onClick={(event) => {
-                      measureOutline(event.currentTarget)
-                      onSelectItem(item)
-                    }}
+                    data-slot="navigation-panel-branch"
+                    className="grid min-w-0 gap-1 max-lg:contents"
                   >
-                    <span
-                      data-slot="navigation-panel-item-icon"
-                      className="grid size-11 place-items-center justify-self-center"
-                    >
-                      <span
-                        data-slot="navigation-panel-item-glyph"
-                        className={cn(
-                          "grid size-7 place-items-center justify-self-center text-nextide-tide transition-[color,filter] duration-[var(--nextide-drawer-icon-duration)] ease-[var(--nextide-drawer-ease)] [&_svg]:block [&_svg]:size-4",
-                          active && "drop-shadow-[0_0_8px_rgb(30_228_188/0.24)]"
-                        )}
-                      >
-                        {item.icon ?? item.label.slice(0, 1)}
-                      </span>
-                    </span>
-                    <span
-                      aria-hidden={collapsed || drawerCollapsed}
+                    <div
+                      data-slot="navigation-panel-item-row"
                       className={cn(
-                        "min-w-0 whitespace-nowrap transition-[max-width,opacity] duration-[var(--nextide-drawer-duration)] ease-[var(--nextide-drawer-ease)] motion-reduce:transition-none",
-                        drawerCollapsed
-                          ? "max-w-0 overflow-visible opacity-0"
-                          : "max-w-52 overflow-hidden opacity-100"
+                        "grid min-w-0 items-center gap-1 max-lg:flex max-lg:min-w-max",
+                        !collapsed &&
+                          !drawerCollapsed &&
+                          (item.action || hasChildren)
+                          ? item.action && hasChildren
+                            ? "grid-cols-[minmax(0,1fr)_2rem_2rem]"
+                            : "grid-cols-[minmax(0,1fr)_2rem]"
+                          : "grid-cols-1"
                       )}
                     >
-                      <span
+                      <button
+                        type="button"
+                        ref={(node) => {
+                          itemRefs.current[item.id] = node
+                        }}
+                        data-slot="navigation-panel-item"
                         className={cn(
-                          "grid min-w-0 gap-0.5 transition-transform duration-[var(--nextide-drawer-duration)] ease-[var(--nextide-drawer-ease)] motion-reduce:transition-none max-lg:block",
-                          drawerCollapsed
-                            ? "w-52 -translate-x-12"
-                            : "translate-x-0"
+                          "group relative grid min-h-11 w-full items-center gap-2 rounded-lg border border-transparent text-left transition-[color,background-color] duration-[var(--nextide-motion-control)] ease-[var(--nextide-ease-out-quart)] motion-reduce:transition-none max-lg:h-11 max-lg:w-auto max-lg:min-w-max max-lg:grid-cols-[2rem_minmax(0,1fr)] max-lg:pr-3",
+                          collapsed ? "h-11" : "h-[3.25rem]",
+                          collapsed
+                            ? "mr-auto w-11 grid-cols-[2.75rem_0fr] gap-0 p-0"
+                            : "grid-cols-[2.75rem_minmax(0,1fr)] p-0",
+                          active
+                            ? "text-foreground max-lg:bg-nextide-tide/[0.07]"
+                            : branchActive
+                              ? "text-foreground"
+                              : "text-muted-foreground hover:bg-nextide-panel-strong/70 hover:text-foreground"
                         )}
+                        aria-current={
+                          active || compactChildActive ? "page" : undefined
+                        }
+                        aria-label={
+                          collapsed || drawerCollapsed
+                            ? [
+                                activeChild?.label ?? item.label,
+                                item.status,
+                                item.meta,
+                              ]
+                                .filter(Boolean)
+                                .join(" ")
+                            : undefined
+                        }
+                        onClick={(event) => {
+                          measureOutline(event.currentTarget)
+                          onSelectItem(
+                            compactChildActive && activeChild
+                              ? activeChild
+                              : item
+                          )
+                        }}
                       >
-                        <span className="truncate text-sm font-medium">
-                          {item.label}
+                        <span
+                          data-slot="navigation-panel-item-icon"
+                          className="grid size-11 place-items-center justify-self-center"
+                        >
+                          <span
+                            data-slot="navigation-panel-item-glyph"
+                            className={cn(
+                              "grid size-7 place-items-center justify-self-center text-nextide-tide transition-[color,filter] duration-[var(--nextide-drawer-icon-duration)] ease-[var(--nextide-drawer-ease)] [&_svg]:block [&_svg]:size-4",
+                              (active || branchActive) &&
+                                "drop-shadow-[0_0_8px_rgb(30_228_188/0.24)]"
+                            )}
+                          >
+                            {item.icon ?? item.label.slice(0, 1)}
+                          </span>
                         </span>
-                        {item.meta || item.status ? (
-                          <span className="flex min-w-0 items-center gap-2 max-lg:hidden">
-                            {item.meta ? (
-                              <small className="min-w-0 truncate text-xs text-muted-foreground">
-                                {item.meta}
-                              </small>
-                            ) : null}
-                            {item.status ? (
-                              <StatusBadge
-                                tone={item.tone ?? "neutral"}
-                                className="relative z-20 px-1.5 py-0.5"
-                              >
-                                {item.status}
-                              </StatusBadge>
+                        <span
+                          aria-hidden={collapsed || drawerCollapsed}
+                          className={cn(
+                            "min-w-0 whitespace-nowrap transition-[max-width,opacity] duration-[var(--nextide-drawer-duration)] ease-[var(--nextide-drawer-ease)] motion-reduce:transition-none",
+                            drawerCollapsed
+                              ? "max-w-0 overflow-visible opacity-0"
+                              : "max-w-52 overflow-hidden opacity-100"
+                          )}
+                        >
+                          <span
+                            className={cn(
+                              "grid min-w-0 gap-0.5 transition-transform duration-[var(--nextide-drawer-duration)] ease-[var(--nextide-drawer-ease)] motion-reduce:transition-none max-lg:block",
+                              drawerCollapsed
+                                ? "w-52 -translate-x-12"
+                                : "translate-x-0"
+                            )}
+                          >
+                            <span className="truncate text-sm font-medium">
+                              {item.label}
+                            </span>
+                            {item.meta || item.status ? (
+                              <span className="flex min-w-0 items-center gap-2 max-lg:hidden">
+                                {item.meta ? (
+                                  <small className="min-w-0 truncate text-xs text-muted-foreground">
+                                    {item.meta}
+                                  </small>
+                                ) : null}
+                                {item.status ? (
+                                  <StatusBadge
+                                    tone={item.tone ?? "neutral"}
+                                    className="relative z-20 px-1.5 py-0.5"
+                                  >
+                                    {item.status}
+                                  </StatusBadge>
+                                ) : null}
+                              </span>
                             ) : null}
                           </span>
-                        ) : null}
+                        </span>
+                      </button>
+                      {item.action &&
+                      onActionItem &&
+                      !collapsed &&
+                      !drawerCollapsed ? (
+                        <button
+                          type="button"
+                          data-slot="navigation-panel-item-action"
+                          aria-label={item.action.label}
+                          className="grid size-8 place-items-center rounded-md text-muted-foreground transition-colors hover:bg-nextide-panel-strong hover:text-nextide-tide focus-visible:ring-2 focus-visible:ring-ring/70 focus-visible:outline-none max-lg:size-11 [&_svg]:size-4"
+                          onClick={() => onActionItem(item)}
+                        >
+                          {item.action.icon ?? "+"}
+                        </button>
+                      ) : null}
+                      {hasChildren &&
+                      onToggleItem &&
+                      !collapsed &&
+                      !drawerCollapsed ? (
+                        <button
+                          type="button"
+                          data-slot="navigation-panel-item-toggle"
+                          aria-label={`${item.expanded ? "Collapse" : "Expand"} ${item.label}`}
+                          aria-expanded={item.expanded ?? false}
+                          className="grid size-8 place-items-center rounded-md text-muted-foreground transition-colors hover:bg-nextide-panel-strong hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/70 focus-visible:outline-none max-lg:size-11"
+                          onClick={() => onToggleItem(item)}
+                        >
+                          <ChevronDown
+                            className={cn(
+                              "size-4 transition-transform duration-[var(--nextide-motion-control)] motion-reduce:transition-none",
+                              !item.expanded && "-rotate-90"
+                            )}
+                          />
+                        </button>
+                      ) : null}
+                    </div>
+                    {hasChildren &&
+                    item.expanded &&
+                    !collapsed &&
+                    !drawerCollapsed ? (
+                      <div
+                        data-slot="navigation-panel-children"
+                        className="ml-[1.375rem] grid gap-1 border-l border-nextide-line/70 pl-3 max-lg:ml-0 max-lg:flex max-lg:border-l-0 max-lg:pl-0"
+                      >
+                        {item.children?.map((child) => {
+                          const childActive = child.id === activeItemId
+
+                          return (
+                            <button
+                              key={child.id}
+                              type="button"
+                              ref={(node) => {
+                                itemRefs.current[child.id] = node
+                              }}
+                              data-slot="navigation-panel-child"
+                              className={cn(
+                                "group grid min-h-11 w-full grid-cols-[2rem_minmax(0,1fr)] items-center rounded-lg border border-transparent pr-2 text-left text-sm transition-colors max-lg:w-auto max-lg:min-w-max",
+                                childActive
+                                  ? "bg-nextide-tide/[0.07] text-foreground"
+                                  : "text-muted-foreground hover:bg-nextide-panel-strong/70 hover:text-foreground"
+                              )}
+                              aria-current={childActive ? "page" : undefined}
+                              onClick={(event) => {
+                                measureOutline(event.currentTarget)
+                                onSelectItem(child)
+                              }}
+                            >
+                              <span
+                                data-slot="navigation-panel-item-icon"
+                                className="grid size-8 place-items-center"
+                              >
+                                <span
+                                  data-slot="navigation-panel-item-glyph"
+                                  className="grid size-6 place-items-center text-nextide-tide [&_svg]:size-3.5"
+                                >
+                                  {child.icon ?? (
+                                    <span className="size-1.5 rounded-full bg-current" />
+                                  )}
+                                </span>
+                              </span>
+                              <span className="grid min-w-0 gap-0.5">
+                                <span className="truncate font-medium">
+                                  {child.label}
+                                </span>
+                                {child.meta || child.status ? (
+                                  <small className="truncate text-xs text-muted-foreground max-lg:hidden">
+                                    {[child.meta, child.status]
+                                      .filter(Boolean)
+                                      .join(" · ")}
+                                  </small>
+                                ) : null}
+                              </span>
+                            </button>
+                          )
+                        })}
+                      </div>
+                    ) : null}
+                    {activeChild && !item.expanded && !compact ? (
+                      <span
+                        data-slot="navigation-panel-current-child"
+                        aria-current="page"
+                        className="sr-only"
+                      >
+                        {activeChild.label}
                       </span>
-                    </span>
-                  </button>
+                    ) : null}
+                  </div>
                 )
               })}
             </div>
@@ -860,6 +1056,8 @@ function NavigationPanel({
   commandShortcut,
   onToggle,
   onSelectItem,
+  onToggleItem,
+  onActionItem,
   footer,
   userMenu,
   className,
@@ -904,6 +1102,8 @@ function NavigationPanel({
           commandLabel={commandLabel}
           commandShortcut={commandShortcut}
           onSelectItem={onSelectItem}
+          onToggleItem={onToggleItem}
+          onActionItem={onActionItem}
           onToggle={onToggle}
         />
         <NavigationPanelNav
@@ -913,6 +1113,8 @@ function NavigationPanel({
           drawerCollapsed={drawerCollapsed}
           drawerTransitioning={drawerTransitioning}
           onSelectItem={onSelectItem}
+          onToggleItem={onToggleItem}
+          onActionItem={onActionItem}
         />
         <NavigationPanelFooter
           collapsed={collapsed}
@@ -971,6 +1173,29 @@ function readNavigationItemMotionRect(item: HTMLButtonElement) {
   )
 }
 
+function getVisibleNavigationPanelItems(sections: NavigationPanelSection[]) {
+  return sections.flatMap((section) =>
+    section.items.flatMap((item) => [
+      item,
+      ...(item.expanded ? (item.children ?? []) : []),
+    ])
+  )
+}
+
+function getEffectiveNavigationItemId(
+  sections: NavigationPanelSection[],
+  activeItemId: string | undefined,
+  compact: boolean
+) {
+  if (!activeItemId) return activeItemId
+
+  const parent = sections
+    .flatMap((section) => section.items)
+    .find((item) => item.children?.some((child) => child.id === activeItemId))
+
+  return parent && (compact || !parent.expanded) ? parent.id : activeItemId
+}
+
 export {
   NavigationPanel,
   defaultNavigationPanelSections,
diff --git a/tests/e2e/qualification.spec.ts b/tests/e2e/qualification.spec.ts
index a291258..11c1502 100644
--- a/tests/e2e/qualification.spec.ts
+++ b/tests/e2e/qualification.spec.ts
@@ -472,6 +472,106 @@ test("collapsed navigation search closes cleanly", async ({ page }) => {
   await expect(search).toHaveCSS("width", "44px")
 })
 
+test("navigation branches keep destinations and create actions distinct", async ({
+  page,
+}) => {
+  await page.setViewportSize({ width: 1440, height: 900 })
+  await page.goto("/")
+  await page.getByRole("button", { name: /Patterns/ }).click()
+
+  const navigation = page.locator('[data-slot="navigation-panel-frame"]').nth(1)
+  const expand = navigation.getByRole("button", { name: "Expand Campaigns" })
+
+  await expect(expand).toBeVisible()
+  await expect(
+    navigation.getByRole("button", { name: "Summer launch" })
+  ).toHaveCount(0)
+  await expand.click()
+
+  const report = navigation.getByRole("button", { name: "Summer launch" })
+  await expect(
+    navigation.getByRole("button", { name: "Collapse Campaigns" })
+  ).toBeVisible()
+  await report.click()
+  await expect(report).toHaveAttribute("aria-current", "page")
+
+  await navigation.getByRole("button", { name: "Create campaign" }).click()
+  await expect(
+    page.getByText("Create campaign requested 1 time", { exact: true })
+  ).toBeVisible()
+  await expect(report).toHaveAttribute("aria-current", "page")
+
+  await navigation.getByRole("button", { name: "Collapse Campaigns" }).click()
+  const closedBranchGlyph = navigation
+    .getByRole("button", { name: "Campaigns" })
+    .locator('[data-slot="navigation-panel-item-glyph"]')
+  const rail = navigation.locator('[data-slot="navigation-panel-rail"]')
+  await expect(
+    navigation.locator(
+      '[data-slot="navigation-panel-current-child"][aria-current="page"]'
+    )
+  ).toHaveText("Summer launch")
+  await expect
+    .poll(async () => {
+      const glyphBox = await closedBranchGlyph.boundingBox()
+      const railBox = await rail.boundingBox()
+      return glyphBox && railBox ? Math.abs(railBox.y - (glyphBox.y - 2)) : 100
+    })
+    .toBeLessThan(1)
+  await navigation
+    .getByRole("combobox", { name: "Search" })
+    .fill("Summer launch")
+  await page
+    .locator('[data-slot="autocomplete-item"]')
+    .filter({ hasText: "Summer launch" })
+    .click()
+  await expect(report).toHaveAttribute("aria-current", "page")
+
+  await page.setViewportSize({ width: 390, height: 900 })
+  const action = navigation.getByRole("button", { name: "Create campaign" })
+  const disclosure = navigation.getByRole("button", {
+    name: "Collapse Campaigns",
+  })
+  await action.scrollIntoViewIfNeeded()
+  for (const control of [action, disclosure]) {
+    const box = await control.boundingBox()
+    expect(box).not.toBeNull()
+    expect(box!.width).toBeGreaterThanOrEqual(44)
+    expect(box!.height).toBeGreaterThanOrEqual(44)
+  }
+
+  await page.setViewportSize({ width: 1440, height: 900 })
+  await navigation.getByRole("button", { name: "Collapse sidebar" }).click()
+  const current = navigation.getByRole("button", { name: "Summer launch" })
+  await expect(current).toHaveAttribute("aria-current", "page")
+  await expect(navigation).toHaveAttribute("data-collapsed", "true")
+  const currentGlyph = current.locator(
+    '[data-slot="navigation-panel-item-glyph"]'
+  )
+  await expect
+    .poll(async () => {
+      const glyphBox = await currentGlyph.boundingBox()
+      const railBox = await rail.boundingBox()
+      return glyphBox && railBox
+        ? Math.max(
+            Math.abs(railBox.y - (glyphBox.y - 2)),
+            Math.abs(railBox.height - (glyphBox.height + 4))
+          )
+        : 100
+    })
+    .toBeLessThan(1)
+  await navigation
+    .getByRole("combobox", { name: "Search" })
+    .fill("Create campaign")
+  await page
+    .locator('[data-slot="autocomplete-item"]')
+    .filter({ hasText: "Create campaign" })
+    .click()
+  await expect(
+    page.getByText("Create campaign requested 2 times", { exact: true })
+  ).toBeVisible()
+})
+
 test("playground shows exact public names beside component examples", async ({
   page,
 }) => {