Inline mode

By default Qikbar is a modal. Set inline to render it inside an element, always open:

<div id="launcher"></div>

createQikbar({
  inline: '#launcher', // or an HTMLElement
  hotkey: false,       // or keep it: the hotkey focuses the input
  commands,
})

In inline mode:

• No overlay, no scroll lock and no focus trap. The bar sits in normal page flow and fills its container’s width.
• The search input isn’t focused automatically, so it doesn’t steal focus on page load.
• Esc at the root clears the search and blurs. close() resets to the root view.
• data-qikbar-open triggers only open inline bars that target them by namespace: data-qikbar-open="my-namespace".

The homepage demos on this site are inline bars.

Several bars on one page

Give each instance its own namespace, so their storage and recents stay separate. Turn off global shortcuts on secondary bars:

createQikbar({ inline: '#demo', namespace: 'demo', hotkey: false, shortcuts: false, commands: demoCommands })

In React

<Qikbar inline commands={commands} className="h-[480px]" />