Nested Command Menu

A Cmd+K menu with real submenu drilling, a breadcrumb trail, and scoped per-level search.

Prominimalbrutalist

Category: Components
Added: 2026-09-01
Deps: 1
Updated: 2026-09-01

This is a viberdy Pro component

The live preview, the props panel and the write-up are open to everyone. The full source, the AI prompt and CLI install are part of Pro.

Preview

Props

Search placeholder

Requires lucide-react

"use client";

import { useMemo, useState, type ComponentType, type KeyboardEvent } from "react";
import {
  ChevronLeft, ChevronRight, Command, Copy, Download, FileText,
  Redo2, Search, Settings, Sidebar, Undo2, ZoomIn, ZoomOut,
} from "lucide-react";

type Entry = {
  id: string;
  label: string;
  icon: ComponentType<{ className?: string }>;
  children?: Entry[];
};

const TREE: Entry[] = [
  {
    id: "file", label: "File", icon: FileText, children: [

  // ---------------------------------------------------------------
  // Full source available with a viberdy Pro subscription.
  // https://viberdy.dev/pricing
  // ---------------------------------------------------------------
}

Notes

About this component

A flat command palette is one list and one Enter key away from executing anything — fine until commands naturally group (File, Edit, View), at which point a flat list either gets too long to scan or fakes grouping with unselectable section headers. This component makes drilling a real navigation state: a path array of entry ids that gets pushed on selecting a parent and popped on going back, with the visible list and breadcrumb both re-derived from walking the tree through that path rather than being tracked as separate state that could fall out of sync. The detail worth knowing: search is deliberately scoped to the CURRENT level only, not the whole tree — a global fuzzy search across every depth is a different (and heavier) feature, and conflating the two means either search stops working after you drill in, or drilling stops making sense once search starts crossing levels. Reach for this over a flat command palette once you have more than roughly seven or eight top-level commands, or any natural grouping a user would recognize; skip the nesting for anything smaller, where an extra keystroke to drill in costs more than it saves.

Curator’s note

Backspace-to-go-back only fires when the search box is empty, the same guard used in the multi-select combobox, so deleting search text never accidentally pops you out of a submenu.

Pairs well with

Matched on shared tags and category — the entries most likely to be used alongside this one.

Pro

File Tree Explorer

components

A recursive, collapsible file tree with real roving-tabindex arrow-key navigation.

treefile explorersidebar

Command Palette

patterns

A Cmd+K style searchable command menu with a filtered live list.

commandpalettesearch

Pro

Inline Editable Grid

components

A keyboard-driven spreadsheet grid with roving-cell navigation and Excel-style Enter/Tab commits.

gridspreadsheeteditable