# Devtools Command Menubar

Main command bar of a debugging console to toggle panels, throttling and logging options.

- id: `devtools-command-menubar`
- Page: https://agentic-ui-kit.com/components/devtools-command-menubar
- Live preview: https://agentic-ui-kit.com/live/component/devtools-command-menubar

## Install

```bash
agentic-ui add devtools-command-menubar
npx shadcn@4.17.0 add @agentic-ui/devtools-command-menubar
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** horizontal-command-menus, nested-submenus, checkbox-items, radio-groups, keyboard-traversal, shortcut-hints, responsive-compact, state-synchronization, empty-state, error-state
- **Intents:** navigate, manage-collection, execute-flow
- **Suits domains:** devtools, ai-workspace, saas, operations
- **Interaction:** click, keyboard-arrow-navigation, submenu-open, checkbox-toggle, radio-select
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** main command bar of a debugging console to toggle panels, throttling and logging options, top menu of a technical inspection tool with export submenus and profiling modes, IDE-style command interface with visible shortcuts and exclusive radio selections, operations console with network control, user agent emulation and log clearing
- **Avoid when:** primary web navigation between public marketing pages (use navigation-menu), pop-up context menu triggered by right-click (use context-menu)
- **Preserve when adapting:** menubar-keyboard-contract, submenu-and-choice-hierarchy, state-synchronization-model, accessible-empty-and-error-states
- **Replace when adapting:** menu-structure-and-labels, command-actions-and-handlers, shortcut-bindings, devtools-specific-options
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** menubar, button, badge, separator
- **npm dependencies:** lucide-react
- **npm dependencies (registry):** @radix-ui/react-menubar@^1.1.6, clsx@^2.1.1, lucide-react@0.577.0, tailwind-merge@3.5.0