Skip to main content
Wraps other widgets in a consistent panel design with optional header, footer, and collapsible functionality.

​
Usage

import instantsearch from 'instantsearch.js';
import { panel, refinementList } from 'instantsearch.js/es/widgets';

const search = instantsearch({
  indexName: 'instant_search',
  searchClient
});

const panelRefinementList = panel({
  templates: {
    header: 'Brand'
  }
})(refinementList);

search.addWidgets([
  panelRefinementList({
    container: '#brands',
    attribute: 'brand'
  })
]);

search.start();

​
Parameters

​
templates
object
Templates to use for the widget.
​
hidden
function
Function called on each render to determine if the panel should be hidden. Receives the render options of the wrapped widget.
(options: RenderOptions) => boolean
​
collapsed
function
Function called on each render to determine if the panel should be collapsed. When provided, makes the panel collapsible.
(options: RenderOptions) => boolean
​
cssClasses
object
CSS classes to add to the widget elements.

​
Examples

​
Simple header

const panelRefinementList = panel({
  templates: {
    header: 'Categories'
  }
})(refinementList);

panelRefinementList({
  container: '#categories',
  attribute: 'category'
});

​
Dynamic header with count

const panelRefinementList = panel({
  templates: {
    header({ items }) {
      return `Brand (${items.length})`;
    }
  }
})(refinementList);

​
Collapsible panel

const panelRefinementList = panel({
  templates: {
    header: 'Filters'
  },
  collapsed: ({ results }) => !results || results.nbHits === 0
})(refinementList);

​
Hidden when no refinements

const panelRefinementList = panel({
  templates: {
    header: 'Available Colors'
  },
  hidden: ({ items }) => items.length === 0
})(refinementList);

const panelHits = panel({
  templates: {
    header: 'Products',
    footer({ nbHits }) {
      return `<small>Showing ${nbHits} products</small>`;
    }
  }
})(hits);

​
HTML output

<div class="ais-Panel">
  <div class="ais-Panel-header">
    Brand
  </div>
  <div class="ais-Panel-body">
    <!-- Wrapped widget content -->
  </div>
</div>

​
Collapsible panel HTML

<div class="ais-Panel ais-Panel--collapsible">
  <div class="ais-Panel-header">
    <button class="ais-Panel-collapseButton">
      <svg class="ais-Panel-collapseIcon">...</svg>
    </button>
    Brand
  </div>
  <div class="ais-Panel-body">
    <!-- Wrapped widget content -->
  </div>
</div>

Build docs developers (and LLMs) love

Get started for freeTalk to us