Skip to main content
The relevantSort widget allows users to switch between relevant sorting and exhaustive search modes. This is useful for virtual replica indices that support Relevant Sort, letting users choose between more relevant results or comprehensive coverage.

​
Usage

const relevantSort = instantsearch.widgets.relevantSort({
  container: '#relevant-sort',
});

search.addWidget(relevantSort);

​
Examples

​
Basic Relevant Sort

instantsearch.widgets.relevantSort({
  container: '#relevant-sort',
});

​
With Custom Templates

instantsearch.widgets.relevantSort({
  container: '#relevant-sort',
  templates: {
    text({ isRelevantSorted }) {
      return isRelevantSorted
        ? 'Showing relevant results'
        : 'Showing all results';
    },
    button({ isRelevantSorted }) {
      return isRelevantSorted
        ? 'See all results'
        : 'See relevant results';
    },
  },
});

​
With Custom CSS Classes

instantsearch.widgets.relevantSort({
  container: '#relevant-sort',
  cssClasses: {
    root: 'my-RelevantSort',
    text: 'my-RelevantSort-text',
    button: 'my-RelevantSort-button',
  },
});

​
Options

​
container
string | HTMLElement
required
CSS Selector or HTMLElement to insert the widget.
​
templates
object
Templates to customize the widget rendering.
​
cssClasses
object
CSS classes to add to the widget elements.

​
HTML Output

<div class="ais-RelevantSort">
  <div class="ais-RelevantSort-text">
    We removed some search results to show you the most relevant ones
  </div>
  <button class="ais-RelevantSort-button">
    See all results
  </button>
</div>

​
Requirements

This widget only works with virtual replica indices that have Relevant Sort enabled. Learn more about Relevant Sort in the Algolia documentation.

​
Behavior

The widget displays when:
  • The index is a virtual replica with Relevant Sort enabled
  • Results are available
When users click the toggle button:
  • If currently showing relevant results: switches to exhaustive mode (shows all results)
  • If currently showing all results: switches back to relevant mode (shows only relevant results)
The widget uses the relevancyStrictness search parameter to control the sorting mode.

Build docs developers (and LLMs) love

Get started for freeTalk to us