Command

Attach modals to keyboard shortcuts, allowing for easy toggling and improved user interaction.

Usage

The Command component is a web component built from scratch to allow developers to bind a keyboard shortcut and toggle a modal.

To get started, simply use the <uk-command> markup in your HTML code.

Adding command items

You can add items by simply adding a plain old <a> tag, which will be parsed automatically.

<uk-command uk-cloak>
  <!-- ... -->
  <a href="#" data-group="Suggestions">
    <uk-icon custom-class="mr-2" icon="calendar"></uk-icon>
    <span>Calendar</span>
  </a>
  <a href="#" data-group="Suggestions">
    <uk-icon custom-class="mr-2" icon="smile"></uk-icon>
    <span>Search Emoji</span>
  </a>
  <a data-group="Suggestions">
    <uk-icon custom-class="mr-2" icon="calculator"></uk-icon>
    <span>Calculator</span>
  </a>
  <!-- ... -->
</uk-command>

Binding a keyboard shortcut

By default, no keyboard shortcuts are bound. To enable a keyboard shortcut, simply add the key attribute to your Command component.

Copy to clipboard
  • Press ⌘ J
    Calendar Search Emoji Commits Profile Billing Settings 
  • <div class="uk-text-small uk-text-muted uk-text-center">
  Press <kbd class="uk-kbd">⌘ J</kbd>
</div>

<uk-command toggle="key" key="j" uk-cloak>
  <a href="#" data-group="Suggestions">
    <uk-icon custom-class="mr-2" icon="calendar"></uk-icon>
    <span>Calendar</span>
  </a>
  <a href="#" data-group="Suggestions">
    <uk-icon custom-class="mr-2" icon="smile"></uk-icon>
    <span>Search Emoji</span>
  </a>
  <a data-group="Suggestions">
    <uk-icon custom-class="mr-2" icon="git-branch"></uk-icon>
    <span>Commits</span>
  </a>
  <a href="#" data-group="Settings">
    <uk-icon custom-class="mr-2" icon="user"></uk-icon>
    <span>Profile</span>
  </a>
  <a href="#" data-group="Settings">
    <uk-icon custom-class="mr-2" icon="credit-card"></uk-icon>
    <span>Billing</span>
  </a>
  <a href="#" data-group="Settings">
    <uk-icon custom-class="mr-2" icon="settings"></uk-icon>
    <span>Settings</span>
  </a>
</uk-command>

Using a toggle

Since we are using the UIkit modal behind the scenes, we can use any element to toggle a Command component. To start, simply add the toggle attribute to the <uk-command> element. Then, you can use an <a> element linked to the toggle ID like this: <a href="#TOGGLE" uk-toggle>. If you are using another element, such as a button, just add the uk-toggle="target: #TOGGLE" attribute to toggle the Command component.

Copy to clipboard
  • Toggle
    Calendar Search Emoji Commits Profile Billing Settings 
  • <div>
  <a href="#cmd2" uk-toggle>Toggle</a>
  <button
    class="uk-button uk-button-primary uk-margin-small-left"
    uk-toggle="target: #cmd2"
  >
    Button
  </button>
</div>

<uk-command toggle="cmd2" uk-cloak>
  <a href="#" data-group="Suggestions">
    <uk-icon custom-class="mr-2" icon="calendar"></uk-icon>
    <span>Calendar</span>
  </a>
  <a href="#" data-group="Suggestions">
    <uk-icon custom-class="mr-2" icon="smile"></uk-icon>
    <span>Search Emoji</span>
  </a>
  <a data-group="Suggestions">
    <uk-icon custom-class="mr-2" icon="git-branch"></uk-icon>
    <span>Commits</span>
  </a>
  <a href="#" data-group="Settings">
    <uk-icon custom-class="mr-2" icon="user"></uk-icon>
    <span>Profile</span>
  </a>
  <a href="#" data-group="Settings">
    <uk-icon custom-class="mr-2" icon="credit-card"></uk-icon>
    <span>Billing</span>
  </a>
  <a href="#" data-group="Settings">
    <uk-icon custom-class="mr-2" icon="settings"></uk-icon>
    <span>Settings</span>
  </a>
</uk-command>

Customizing searchable keywords

Sometimes, there are elements that have related keywords that may be slightly off or awkward when included as anchor tags. For these use cases, we can leverage the data-keywords attribute.

For example, if we have a “Form” link but also want it to appear when users search for terms like “checkbox,” “input,” “toggle switch,” etc., we can simply add a comma-separated list of terms like this: data-keywords="checkbox,input,radio"

<uk-command uk-cloak>
  <a
    data-keywords="input,select,textarea,radio,checkbox,range,toggle switch,range"
    href="#"
  >
    Form
  </a>
  <a data-keywords="text,typography" href="#"> Heading </a>
  <a data-keywords="dialog" href="#"> Modal </a>
</uk-command>

To group related elements, simply use the data-group attribute and items will be automatically sorted and grouped with headers.

<uk-command uk-cloak>
  <a href="#" data-group="Suggestions">
    <uk-icon custom-class="mr-2" icon="calendar"></uk-icon>
    <span>Calendar</span>
  </a>
  <a href="#" data-group="Suggestions">
    <uk-icon custom-class="mr-2" icon="smile"></uk-icon>
    <span>Search Emoji</span>
  </a>
  <a data-group="Suggestions">
    <uk-icon custom-class="mr-2" icon="calculator"></uk-icon>
    <span>Calculator</span>
  </a>
  <a href="#" data-group="Settings">
    <uk-icon custom-class="mr-2" icon="user"></uk-icon>
    <span>Profile</span>
  </a>
  <a href="#" data-group="Settings">
    <uk-icon custom-class="mr-2" icon="credit-card"></uk-icon>
    <span>Billing</span>
  </a>
  <a href="#" data-group="Settings">
    <uk-icon custom-class="mr-2" icon="settings"></uk-icon>
    <span>Settings</span>
  </a>
</uk-command>

Disabling an item

Sometimes, we may want to disable items. To do this, simply omit the href attribute, and the item will be automatically disabled.

<uk-command uk-cloak>
  <!-- ... -->
  <a data-group="Suggestions">
    <uk-icon custom-class="mr-2" icon="calculator"></uk-icon>
    <span>Calculator</span>
  </a>
  <!-- ... -->
</uk-command>

Attributes

The following attributes are available for this component:

NameTypeDefaultDescription
keySringAssign a keyboard shortcut.
placeholderStringSearchThe placeholder for the input.
toggleStringBehind the scenes, this will be used as the ID of the modal. It is useful for manually toggling the Command component using an <a> or a <button> tag.
Customize