Toolbar

Implemented Action

Compact grouped controls with shared borders, composed filters and keyboard arrow navigation.

Kumo reference: kumo-ui.com/components/toolbar/

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

Filter toolbar

Show template

{% load wdj %}
{% wdj_component "wdj/components/toolbar.html" aria_label="DNS records" class="w-full max-w-md" %}
{% wdj_component "wdj/components/toolbar_item.html" grow=True %}
  {% include "wdj/components/input_group.html" with id="toolbar_filter_toolbar" name="q" aria_label="Search DNS records" placeholder="Search DNS records" prefix_icon="search" only %}
{% endwdj_component %}
{% wdj_component "wdj/components/toolbar_item.html" shape="square" %}
  {% include "wdj/components/button.html" with variant="ghost" label="" icon="list-filter" shape="square" aria_label="Filter" only %}
{% endwdj_component %}
{% wdj_component "wdj/components/toolbar_item.html" shape="square" %}
  {% include "wdj/components/button.html" with variant="ghost" label="" icon="settings" shape="square" aria_label="Settings" only %}
{% endwdj_component %}
{% endwdj_component %}

Select

Show template

{% load wdj %}
{% wdj_component "wdj/components/toolbar.html" aria_label="Sort records"  %}
{% wdj_component "wdj/components/toolbar_item.html" %}
  {% include "wdj/components/button.html" with variant="ghost" label="Filter" icon="list-filter" only %}
{% endwdj_component %}
{% wdj_component "wdj/components/toolbar_item.html" %}
  {% include "wdj/components/select.html" with id="toolbar-sort" name="sort" aria_label="Sort records" options=toolbar_sort_options selected="name" only %}
{% endwdj_component %}
{% wdj_component "wdj/components/toolbar_item.html" shape="square" %}
  {% include "wdj/components/button.html" with variant="ghost" label="" icon="settings" shape="square" aria_label="View settings" only %}
{% endwdj_component %}
{% endwdj_component %}

Combobox

Show template

{% load wdj %}
{% wdj_component "wdj/components/toolbar.html" aria_label="Status filter" class="w-full max-w-md" %}
{% wdj_component "wdj/components/toolbar_item.html" %}
  {% include "wdj/components/button.html" with variant="ghost" label="Status" icon="list-filter" only %}
{% endwdj_component %}
{% wdj_component "wdj/components/toolbar_item.html" grow=True %}
  {% include "wdj/components/combobox.html" with id="toolbar-status" name="status" placeholder="Filter status…" options=toolbar_status_options labels=toolbar_combo_labels attrs=toolbar_combo_attrs only %}
{% endwdj_component %}
{% endwdj_component %}

Input shorthand

Show template

{% load wdj %}
{% wdj_component "wdj/components/toolbar.html" aria_label="Search DNS records" class="w-full max-w-md" %}
{% wdj_component "wdj/components/toolbar_item.html" grow=True %}
  {% include "wdj/components/input.html" with id="toolbar-shorthand" aria_label="Search DNS records" placeholder="Search DNS records" only %}
{% endwdj_component %}
{% wdj_component "wdj/components/toolbar_item.html" shape="square" %}
  {% include "wdj/components/button.html" with variant="ghost" label="" icon="list-filter" shape="square" aria_label="Filter" only %}
{% endwdj_component %}
{% wdj_component "wdj/components/toolbar_item.html" shape="square" %}
  {% include "wdj/components/button.html" with variant="ghost" label="" icon="settings" shape="square" aria_label="Settings" only %}
{% endwdj_component %}
{% endwdj_component %}

Input group

Show template

{% load wdj %}
{% wdj_component "wdj/components/toolbar.html" aria_label="Worker address" class="w-full max-w-lg" %}
{% wdj_component "wdj/components/toolbar_item.html" grow=True %}
  {% include "wdj/components/input_group.html" with id="toolbar-worker" name="worker" aria_label="Worker subdomain" placeholder="my-worker" suffix=".workers.dev" only %}
{% endwdj_component %}
{% wdj_component "wdj/components/toolbar_item.html" %}
  {% include "wdj/components/button.html" with variant="ghost" label="Visit" only %}
{% endwdj_component %}
{% endwdj_component %}

Deprecated sizing

base

Show template

{% load wdj %}
<div class="grid w-full max-w-sm gap-3">
{% for size in audit_sizes %}
<div class="flex min-w-0 items-center gap-3"><span class="w-10 shrink-0 text-base text-kumo-subtle">{{ size }}</span>
{% wdj_component "wdj/components/toolbar.html" aria_label="Search size" size=size class="min-w-0 flex-1" %}
{% wdj_component "wdj/components/toolbar_item.html" grow=True %}
  {% include "wdj/components/input.html" with id="toolbar-size-"|add:size aria_label=size|add:" search" placeholder="Search..." only %}
{% endwdj_component %}
{% wdj_component "wdj/components/toolbar_item.html" %}
  {% include "wdj/components/button.html" with variant="ghost" label="Apply" only %}
{% endwdj_component %}
{% endwdj_component %}
</div>
{% endfor %}
</div>

Button actions

Show template

{% load wdj %}
{% wdj_component "wdj/components/toolbar.html" aria_label="File actions"  %}
{% wdj_component "wdj/components/toolbar_item.html" %}
  {% include "wdj/components/button.html" with variant="ghost" label="Upload" icon="upload" only %}
{% endwdj_component %}
{% wdj_component "wdj/components/toolbar_item.html" %}
  {% include "wdj/components/button.html" with variant="ghost" label="Download" icon="download" only %}
{% endwdj_component %}
{% endwdj_component %}

Links

Show template

{% load wdj %}
{% wdj_component "wdj/components/toolbar.html" aria_label="Documentation shortcuts"  %}
{% wdj_component "wdj/components/toolbar_item.html" %}
  {% include "wdj/components/button.html" with variant="ghost" label="Button documentation" icon="book-open" href="/components/button/" only %}
{% endwdj_component %}
{% wdj_component "wdj/components/toolbar_item.html" %}
  {% include "wdj/components/button.html" with variant="ghost" label="Download" icon="download" only %}
{% endwdj_component %}
{% endwdj_component %}

Accessible labels

Show template

{% load wdj %}
{% wdj_component "wdj/components/toolbar.html" aria_label="Search records" class="w-full max-w-lg" %}
{% wdj_component "wdj/components/toolbar_item.html" grow=True %}
  {% include "wdj/components/input.html" with id="toolbar-accessible" aria_label="Search records" placeholder="Search" only %}
{% endwdj_component %}
{% wdj_component "wdj/components/toolbar_item.html" shape="square" %}
  {% include "wdj/components/button.html" with variant="ghost" label="" icon="search" shape="square" aria_label="Search" only %}
{% endwdj_component %}
{% endwdj_component %}

Vertical

Show template

{% load wdj %}
{% wdj_component "wdj/components/toolbar.html" aria_label="Vertical" orientation="vertical" class="w-40" %}
{% wdj_component "wdj/components/toolbar_item.html" %}
  {% include "wdj/components/button.html" with variant="ghost" label="Previous" only %}
{% endwdj_component %}
{% wdj_component "wdj/components/toolbar_item.html" %}
  {% include "wdj/components/button.html" with variant="ghost" label="Next" only %}
{% endwdj_component %}
{% endwdj_component %}

Without focus wrapping

Show template

{% load wdj %}
{% wdj_component "wdj/components/toolbar.html" aria_label="Without focus wrapping" loop_focus=False %}
{% wdj_component "wdj/components/toolbar_item.html" %}
  {% include "wdj/components/button.html" with variant="ghost" label="Previous" only %}
{% endwdj_component %}
{% wdj_component "wdj/components/toolbar_item.html" %}
  {% include "wdj/components/button.html" with variant="ghost" label="Next" only %}
{% endwdj_component %}
{% endwdj_component %}

Disabled action

Show template

{% load wdj %}
{% wdj_component "wdj/components/toolbar.html" aria_label="Disabled action"  %}
{% wdj_component "wdj/components/toolbar_item.html" %}
  {% include "wdj/components/button.html" with variant="ghost" label="Edit" disabled=True only %}
{% endwdj_component %}
{% wdj_component "wdj/components/toolbar_item.html" %}
  {% include "wdj/components/button.html" with variant="ghost" label="Download" icon="download" only %}
{% endwdj_component %}
{% endwdj_component %}

Working filters

Show template

{% load wdj %}
{{ toolbar_records|json_script:"toolbar-records-data" }}
<form class="w-full max-w-lg space-y-4" x-data="{ query: '', status: 'all', records: JSON.parse(document.getElementById('toolbar-records-data').textContent), get filtered() { return this.records.filter(row => (this.status === 'all' || row.status === this.status) &amp;&amp; row.name.toLowerCase().includes(this.query.toLowerCase())); } }"
      @submit.prevent @change="if ($event.target.name === 'status') status = $event.target.value" @reset="query = ''; status = 'all'">
  {% wdj_component "wdj/components/toolbar.html" aria_label="Filter DNS records" class="w-full" %}
    {% wdj_component "wdj/components/toolbar_item.html" grow=True %}
      {% include "wdj/components/input.html" with id="toolbar-working-query" name="q" aria_label="Search DNS names" placeholder="Search records" attrs=toolbar_query_attrs only %}
    {% endwdj_component %}
    {% wdj_component "wdj/components/toolbar_item.html" %}
      {% include "wdj/components/select.html" with id="toolbar-working-status" name="status" aria_label="Record status" options=toolbar_filter_options selected="all" only %}
    {% endwdj_component %}
    {% wdj_component "wdj/components/toolbar_item.html" shape="square" %}
      {% include "wdj/components/button.html" with type="reset" label="" aria_label="Reset filters" variant="ghost" shape="square" icon="rotate-ccw" only %}
    {% endwdj_component %}
  {% endwdj_component %}
  <p role="status" class="text-base text-kumo-subtle" x-text="filtered.length + ' records'">4 records</p>
  <ul class="divide-y divide-kumo-hairline">
    <template x-for="row in filtered" :key="row.name">
      <li class="flex flex-wrap items-center justify-between gap-2 py-2 text-base"><span class="break-all" x-text="row.name"></span><span class="text-kumo-subtle" x-text="row.status"></span></li>
    </template>
  </ul>
  <p x-cloak x-show="!filtered.length" class="text-base text-kumo-subtle">No records match these filters.</p>
</form>

API Reference

Prop	Type	Default	Description
aria_label	string	unset	Aria label; pass the documented value shown in the examples.
size	string	base	Compatibility sizing for all explicit toolbar items: xs=20, sm=26, base=36, lg=40px. Prefer the default base size.
orientation	string	horizontal	horizontal or the wdj vertical extension; arrow navigation follows orientation and RTL direction.
loop_focus	bool	True	Loop focus; pass the documented value shown in the examples.
slot	string / HTML slot	unset	Wrap each Button/link, Input, InputGroup, Select or Combobox in toolbar_item.html to join its borders and keyboard focus order.
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.
item.grow	bool	False	toolbar_item.html: let an input or combobox fill the remaining toolbar width.
item.shape	string	base	toolbar_item.html: square for an icon-only cell. Give the child Button an empty label and a meaningful aria_label.
item.slot	HTML slot	unset	toolbar_item.html: one existing control, retaining its form name, options, HTMX and Alpine attributes.
item.class	string	""	Additional literal classes on the toolbar item wrapper.

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