Skip to main content

setCustomComponent(slug, getComponent)

Sets a CommandBar component to custom HTML or to a custom component (.addComponent). This is only available to select enterprise customers — please reach out to team@commandbar.com if you'd like to use this feature.

Example​

// set a custom footer
window.CommandBar.setCustomComponent("footer", customFooter);

// set a custom default state
window.CommandBar.setCustomComponent(
  "defaultState",
  () => `
    <div style="padding: 3rem; text-align: center"><p>Try searching for something!</p>
    <img width="100%" src="https://cdn2.lamag.com/wp-content/uploads/sites/6/2017/01/alvan-nee-1316903-unsplash.jpg" />
    </div>
    `
);

Method parameters​

slug Required​

'header' | 'input' | 'sidepanel' | 'footer' | 'navPaneHeader' | 'navPaneFooter' | 'defaultState' | 'emptyState'

The component that you want to customize.

  • header: appears above the search input
  • input: appears within the search input
  • sidepanel: appears to the right of the search input
  • footer: appears below Spotlight
  • navPaneHeader: appears above the navigation pane
  • navPaneFooter: appears below the navigation pane
  • defaultState: takes over the default bar state when there the input is blank
  • emptyState: takes over the no results view in Spotlight

getComponent Required​

(() => CustomComponent | () => HTMLString)

A function that returns either an HTML string or customComponent.