Active theme set to Nord LightNord DarkVet LightVet DarkHealth LightHealth Dark and saved in preferences.
Copied to clipboard.

Command Menu draft

Command Menu allows users to navigate and use an app without touching the mouse and helps them transform into “power users” who can harness more advanced features far faster.

Edit in CodePen Open in new window
Edit in CodePen Open in new window
Edit in CodePen Open in new window
Edit in CodePen Open in new window
<nord-command-menu open></nord-command-menu>

<script>
const menu = document.querySelector("nord-command-menu")

menu.commands = [
{
id: "consultation",
title: "Start consultation",
keywords: "command new create",
hotkey: "Alt+KeyC",
section: "Commands",
handler: () => {
alert("Start consultation")
},
},
{
id: "patient",
title: "New patient",
keywords: "command new create",
hotkey: "Alt+KeyP",
icon: "interface-add",
section: "Commands",
handler: () => {
alert("New patient")
},
},
{
id: "appointment",
title: "New appointment",
keywords: "command new create",
hotkey: "Alt+KeyA",
icon: "interface-add",
section: "Commands",
handler: () => {
alert("New appointment")
},
},
{
id: "invoice",
title: "New invoice",
keywords: "command new create",
hotkey: "Alt+KeyI",
icon: "interface-add",
section: "Commands",
handler: () => {
alert("New invoice")
},
},
{
id: "user",
title: "Switch user",
keywords: "command change log sign out in",
hotkey: "Alt+KeyU",
icon: "user-multiple",
section: "Commands",
handler: () => {
alert("Switch user")
},
},
{
id: "theme",
keywords: "dark light mode ui",
title: "Change theme...",
icon: "file-picture",
children: ["Light Theme", "Dark Theme"],
hotkey: "Alt+KeyT",
section: "Commands",
},
{
id: "Light Theme",
keywords: "mode ui",
title: "Change theme to Light",
icon: "interface-mode-light",
parent: "theme",
handler: () => {
alert("Change to light theme")
},
},
{
id: "Dark Theme",
keywords: "mode ui",
title: "Change theme to Dark",
icon: "interface-mode-dark",
parent: "theme",
handler: () => {
alert("Change to dark theme")
},
},
{
id: "dashboard",
keywords: "sections view go to visit",
title: "Open dashboard",
hotkey: "Alt+Digit1",
section: "Sections",
handler: () => {
alert("Open dashboard")
},
},
{
id: "payments",
keywords: "sections view go to visit",
title: "Open payments",
hotkey: "Alt+Digit2",
section: "Sections",
handler: () => {
alert("View payments")
},
},
{
id: "reports",
keywords: "sections view go to visit",
title: "Open reports",
hotkey: "Alt+Digit3",
section: "Sections",
handler: () => {
alert("Open reports")
},
},
{
id: "settings",
keywords: "sections view go to visit",
title: "Open settings",
hotkey: "Alt+Digit4",
section: "Sections",
handler: () => {
alert("Open settings")
},
},
]
</script>

<nord-button variant="primary">Open menu (Ctrl+K)</nord-button>
<script>
const button = document.querySelector("nord-button")

if (navigator.platform.indexOf("Mac") > -1) {
button.textContent = "Open menu (⌘+K)"
}
button.addEventListener("click", () => {
menu.show()
})
</script>

Properties

PropertyAttributeDescriptionTypeDefault
openopenShow or hide the command menu.booleanfalse
placeholderplaceholderHint text to display in the search field.string"Type a command or search..."
commandsArray of commands to be included in the menu.Array<ICommandMenuAction>[]

Events

EventDescriptionType
openThe command menu was opened foo.NordEvent
closeThe command menu was closed bar.NordEvent
n-selectUser selected a command from the menu.SelectEvent

Methods

show(options: { parent?: string }) => void

Show the command menu programmatically.

options
allows you to open the menu filtered to a specific parent command.

close() => void

Close the command menu programmatically.

toggleOpen() => void

Toggle the open state programmatically.

focus() => void

Focus the command menu's input.


Slots

Slot nameDescription
footerUsed to replace the default footer contents.

Usage

This section will in the future include guidelines for designers and developers about the usage of this component in different contexts.

Integration

For integration guidelines, please see Using Components. This documentation explains how to implement and use Nord Web Components across different technologies such as Vue.js, React, or Vanilla JavaScript.

Integration Guidelines

Troubleshooting

If you experience any issues while using Nord Web Components, please head over to the Support page for more guidelines and ways to contact us.