Command Bars

These are a thing these days.

Maggie Appleton put a point on it in a recent article: Command K Bars. She makes the point that they date back quite a way, to “Spotlight” in macOS Tiger. Twenty-two years later, we still have Spotlight:

Screenshot of Spotlight on macOS, with a search for "command" open being autocompleted to "command-bar"

Tools like Raycast and Alfred arguably take this same concept up a level by doing more and offering more customization.

That’s OS software, and it makes great sense there, but these Command Bars are making their way to the web as well. For example, just in React-land, there are three major projects:

Screenshot all all the three React project homepages mentioned above open.
We’re peak jQuery plugins React components, eh?

The SasS startup CommandBar productizes the whole idea and helps you add the feature to your app including integrations with other services. Other software considers it a big feature release when they ship a Command Bar (see Polypane). And yet other attempts to jack in Command Bars into other software that could use it (see Turbo Admin for WordPress).

What do these Command Bars do? I think of it as a potential three-punch:

Run, Jump, or Search

As in:

  • The app does things, so if the app, say, calls people, and someone types “tasks” into the Command Bar, it should get them to the interface for tasks. “New task” would at least attempt to interpret what the user is trying to do and do it (bring up the task-entering UI). Run a command, as it were.
  • Quick navigation is another possibility. The more complex an app, the more places to get to, the more a user might appreciate being able to jump somewhere based on some entered text. “Latest invoices”, for instance, could jump you to a page of the most recent invoices sorted that way.
  • Search might be the primary activity for a Command Bar, but I also generally think of it as the fallback. If there is no other clear match for something to do, execute a search.

This means the results of a Command Bar need to be ranked. Ranking is hard. To compound the hardness, fuzzy searching should work (e.g. common misspellings should be worked around) and general human-language input should be accepted (e.g. “go to contacts” means they are trying to get to contacts, not that a search for that exact phrase should be done… probably). Tough stuff — good luck!

What these bars do will highly vary on the app itself. I can imagine situations where search isn’t particularly relevant so it’s only a navigational thing. Or that it has been decided that search is an entirely separate experience. And we can see with stuff like Spotlight that it’s almost entirely search — you don’t run commands at all.

I do want to dwell on the command to activate the Command Bar a bit, as that’s pretty crucial. Sometimes they have no UI whatsoever and rely entirely on a keyboard command to bring them up, so if you hope users actually use it, education on the keyboard command is crucial. “Standardizing” might behoove us all.

What keyboard command do they tend to use?

We can see from Maggie’s article and from the three React components that Command – K seems to be the front-runner. But allow me to take a gander at some software (mostly that I personally use so I can test it):

SoftwareCommand Bar Keyboard ShortcutJobs
FrontCommand – K “Go To”
SlackCommand – K“Jump To”
GitHubCommand – K“Search or Jump To”
NotionCommand – K“Search [workspace]”
DiscordCommand – K“Search for servers, channels, or DMs”
SpotifyCommand – K“What do you want to listen to?”
BusyCalCommand – KCreates New Task
VercelCommand – K Run, Jump, Search
FramerCommand – KRun, Jump, Search
LinearCommand – KRun, Jump, Search
VS CodeCommand – TGo To File
VS CodeCommand – Shift – PRun Command
Sublime TextCommand – PGo to File
Sublime TextCommand – Shift – PRun Command
NovaCommand – Shift – PRun Command
Chrome DevToolsCommand – Shift – PRun Command
Safari DevToolsCommand – P“File or Resource”
Firefox Command – KFocus the Search/URL bar
ArcCommand – TJump to Tab, History Item, Extension, or Search
PolypaneCommand – KRun, Jump, Search
WarpCommand – PRun Command (or @ to Jump to Session)

Clearly a lot of consolidation around Command – K, but deviation in coding tools. If VS Code started defaulting to Command – K, that would really lock it in. I could see it happening, as best I can tell Command – K doesn’t currently do anything by default in VS Code.

VS Code showing in a message in the lower left of the window saying: Command - K was pressed. Waiting for a second key of chord...
Command – K starts a “chord”, so I suppose it’s too late to repurpose it

I’m a little surprised that more apps don’t have more prominent UI for activating and using Command Bars, relegating it to a keyboard command only. If the app has a Search Bar, be bold! Turn it into a multi-capable Command Bar! Or some kind of icon button to activate it.

Maybe Command Bars should attempt a “standardized” icon as well. Like it or not, the hamburger icon has really locked itself in for site-level menus. Could happen here.

Where do Command Bars really help?

It seems to me they are almost always “bonus UX”. Rarely are they ever the only way to do things, they are just another way to do things. But if they are well done, they might just become a better way to do things. Better — in that, once you have that one keyboard command memorized, it becomes essentially a shortcut for anything you want to do. The more complex an app, the more benefit (stares intensely at Photoshop).


I work on CodePen! I'd highly suggest you have a PRO account on CodePen, as it buys you private Pens, media uploads, realtime collaboration, and more.

Get CodePen Pro

3 responses to “Command Bars”

  1. idleberg says:

    In the editor landscape, the term “command palette” is more common, hence using Cmd+P makes a lot of sense. Many modern code editors that follow the tradition of TextMate have a command palette: Sublime Text, Atom, Brackets, Nova, Zed… Likely, Google Chrome has adopted it from there.

  2. Michael C. says:

    “…they date back quite a way, to “Spotlight” in macOS Tiger. Twenty-two years later, we still have Spotlight.”

    Laughs in 4DOS

  3. Cyril Druesne says:

    Long before Spotlight, and even before Mac OS X, there was Launchbar for NextSTEP, which is still available for macOS.

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to Top ⬆️