CommandPalette

Implemented Navigation

Accessible spotlight search overlay with Cmd+K keyboard shortcut.

Kumo reference: kumo-ui.com/components/command-palette/

Presentation commands show demo feedback. Read the interaction guide to connect real actions.

Grouped commands

Show template

{% load wdj %}
{% include "wdj/components/command_palette.html" with id="palette_grouped" groups=command_groups trigger_label="Open grouped commands" only %}

Search

Show template

{% load wdj %}
{% include "wdj/components/command_palette.html" with id="palette_search" groups=command_groups trigger_label="Search commands" placeholder="Search navigation and actions" only %}

Empty result

Show template

{% load wdj %}
{% include "wdj/components/command_palette.html" with id="palette_empty" groups=command_groups trigger_label="Try an unmatched query" only %}

Custom placeholder

Show template

{% load wdj %}
{% include "wdj/components/command_palette.html" with id="command_placeholder" trigger_label="Find a resource" placeholder="Search resources and settings…" groups=command_groups only %}

Custom content

Show template

{% load wdj %}
{% wdj_component "wdj/components/command_palette.html" id="command_custom" trigger_label="Custom commands" %}<a href="/components/" data-wdj-command-item class="block rounded-md px-3 py-2 text-kumo-default hover:bg-kumo-tint">Browse components</a>{% endwdj_component %}

Loading results

Show template

{% load wdj %}
{% include "wdj/components/command_palette.html" with id="audit-command-loading" trigger_label="Loading results" loading=True only %}

Result breadcrumbs

Show template

{% load wdj %}
{% include "wdj/components/command_palette.html" with id="audit-command-breadcrumbs" trigger_label="Search projects" groups=audit_command_results only %}

Browser autocomplete disabled

Show template

{% load wdj %}
{% include "wdj/components/command_palette.html" with id="audit-command-autocomplete" trigger_label="Search without browser suggestions" groups=audit_command_results autocomplete="off" only %}

API Reference

Prop	Type	Default	Description
id	string	unset	Stable unique DOM ID; important for HTMX targets and focus restoration.
placeholder	string	unset	Placeholder; pass the documented value shown in the examples.
groups	list[dict]	unset	Sidebar: label/items groups; items support recursive children, id, value, href, view, icon, badge, active and open.
slot	string / HTML slot	unset	Rich HTML supplied by the wdj_component block tag, rendered in an isolated context.
trigger_label	string	unset	Combobox without endpoint: enable the button trigger and search inside its popup. Calendar: calendar trigger text.
aria_label	string	unset	Aria label; pass the documented value shown in the examples.
autocomplete	string	unset	Autocomplete; pass the documented value shown in the examples.
loading	bool	False	Loading; pass the documented value shown in the examples.
loading_label	string	unset	Loading label; pass the documented value shown in the examples.
default_shortcut	bool	False	Default shortcut; pass the documented value shown in the examples.
show_count	bool	False	Show count; pass the documented value shown in the examples.
close_label	string	unset	Close label; pass the documented value shown in the examples.
empty_message	string	unset	Empty message; pass the documented value shown in the examples.
attrs	dict	{}	Dictionary of escaped native, HTMX or Alpine attributes. Literal Tailwind classes only.
class	string	""	Class; pass the documented value shown in the examples.

Accessibility notes

Every interactive component keeps real semantics and keyboard support: native controls where possible, ARIA only where necessary, and a visible focus ring. See the Accessibility page for the shared contract.

Read the accessibility contract