Navigation

Command Palette

Modal dialog with grouped commands and shortcuts; initCommandPalette adds the substring filter and the keys its footer names.

Element: <dialog>
Module: @basenative/components
Function: renderCommandPalette

Quick start

Import the render function and call it from your server template.

import { renderCommandPalette } from '@basenative/components';

renderCommandPalette({ commands: [{ label: 'Open', action: 'open' }] });

Examples

Each block is a real server render — no mockups, no virtual DOM.

Cmd+K palette

Modal dialog with grouped commands and a substring filter. Ctrl/Cmd+K opens it; ↑↓ move, ↵ selects, Esc closes.

Live render

Ctrl + K

Source

renderCommandPalette({
  commands: [
    { label: 'Go to Home',  action: 'home',     group: 'Navigation' },
    { label: 'New Task',    action: 'new-task', group: 'Actions', shortcut: 'Ctrl+N' },
  ],
  id: 'cmd',
})

document.getElementById('cmd').showModal();

Options

Arguments accepted by renderCommandPalette().

renderCommandPalette option reference
Option	Type	Default	Description
`commands`	`{ label, action, group?, icon?, shortcut? }[]`	`—`	Available commands.
`id`	`string`	`'command-palette'`	Element id used by showModal().