Guide to hierarchical faceted search

This guide breaks down the concept of nested hierarchical facets and offers practical tips for implementation with Meilisearch.

Table of contents

What is faceted search?
Nested hierarchical facets
Data structuring for hierarchical faceted search
Creating a hierarchical faceted search experience with Meilisearch
Using InstantSearch and instant-meilisearch

What is faceted search?

Faceted search lets users refine search results via broad categories or facets. It's an intuitive way to sift through content, enabling users to find results matching their exact requirements.

Take ecommerce websites as a case in point. Users, when searching for products, encounter both a result list and a range of facets to help refinement. These facets can typically be found on the sidebar.

Example from our ecommerce demo:

Nested hierarchical facets

Nested facets provide a multi-level structure that helps users navigate through data by applying successive filters, often displayed in a hierarchical manner.

Nested hierarchical facets are particularly useful for navigating and searching large datasets or collections. Users can navigate up and down through various levels, thereby improving discoverability.

Picture an online book shopping experience. Users can:

1. Begin with the overarching "Books" category
2. Dive deeper by selecting a "Genre"
3. Focus on a sub-genre
4. And further refine by attributes like "Author", "Publication Date", or "Rating"

The foundation for such a search lies in the structuring of data.

Data structuring for hierarchical faceted search

When implementing a hierarchical faceted search, data documents need a hierarchical categorization too—broad categories leading to finer ones.

Take a product dataset as an example:

{
    "id": 1,
    "name": "Seagate BarraCuda 1 To (ST1000DM014)",
    "hierarchicalCategories": {
        "lvl0": "Electronics",
        "lvl1": "Electronics > Computer and Tablets",
        "lvl2": "Electronics > Computer and Tablets > Computer Parts",
        "lvl3": "Electronics > Computer and Tablets > Computer Parts > Storage"
    } 
}

Each product is linked to hierarchical categories, flowing from broad to specific, to establish a clear pathway through the data. This organized categorization is crucial in implementing faceted search, steering users from general categories like "Electronics" to more precise ones, such as "Storage" within "Computer Parts"

Creating a hierarchical faceted search experience with Meilisearch

In Meilisearch, facets are a specific use-case of filters. Whether something is a filter or a facet depends above all on UX and UI design. To be able to refine results based on facets, you need to add the attributes you want to use as facets to the filterableAttributes list. From our product example, you should set  hierarchicalCategories as filterable.

Hierarchical facets typically use the AND logical operator, as each level of the hierarchy acts conjunctively with the others to narrow down the search progressively.

Example:

• Category: Electronics
  • Subcategory: Computers
    • Brand: Apple

The results would show items that are in the Electronics category AND the Computers subcategory AND of the Apple brand.

When creating a faceted search interface, it is helpful to display the distribution of results across the different facets. Showing users the number of results in different categories as they refine their search can enhance their search experience.

Meilisearch supports this functionality through the facets search parameter. When you add the facets parameter to your search query, Meilisearch returns a facetDistribution object. This object provides the number of matching documents distributed among the values of the given facet.

  "facetDistribution":{
    "categories":{
      "Electronics":20,
      "Electronics > Computer and Tablets":7,
      …
      "Electronics > Computer and Tablets > Computer Parts > Storage":3
    }

Leveraging the facets search parameter, you can present a neatly organized and intuitive search interface, allowing users to filter through hierarchical categories effectively. Meilisearch hands you the keys to build your own faceted search UI, yet for a quick and easy setup, employing InstantSearch with instant-meilisearch is a highly efficient alternative.

Using InstantSearch and instant-meilisearch

InstantSearch is an open-source front-end library to build search UIs. Instant-meilisearch is the go-to search client for integrating InstantSearch with Meilisearch.

In this guide, we’ll be using React code samples, you can find more examples in InstantSearch’s documentation

To use InstantSearch with instant-meilisearch, you need to:

1. Import the required modules

import React from 'react';
import { InstantSearch, SearchBox, InfiniteHits, HierarchicalMenu } from 'react-instantsearch';
import { instantMeiliSearch } from '@meilisearch/instant-meilisearch';

2. Establish a Meilisearch client with your Meilisearch host and search API key

const searchClient = instantMeiliSearch( 'https://ms-7053a8dd7c09-72.lon.meilisearch.io', 'meilisearchApiKey' )

3. Set up instantsearch with your Meilisearch index name and the search client

function App() {
  return (
    <InstantSearch indexName="products" searchClient={searchClient}>
      {/* Widgets */}
    </InstantSearch>
  );
}

To have a better understanding of how InstantSearch and instant-meilisearch work together, you can refer to our [dedicated blog post](/blog/instant-meilisearch/

In this guide we’ll use InstantSearch’s HierarchicalMenu widget to display categories in a hierarchical fashion.

This widget has a required prop called attributes. It takes an array of string values. Each string identifies a specific attribute from your data structure, intended to be used in generating the hierarchical menu.

<HierarchicalMenu
    attributes={[
        "hierarchicalCategories.lvl0",
        "hierarchicalCategories.lvl1",
        "hierarchicalCategories.lvl2",
        "hierarchicalCategories.lvl3"
    ]}
/>

With this widget you can create a menu akin to the example below:

This guide equips you with the fundamental understanding and steps needed to implement a hierarchical faceted search using Meilisearch and InstantSearch, enhancing user navigation through layered, intuitive categorization.

For more things Meilisearch, you can subscribe to our newsletter. You can learn more about our product by checking out the roadmap and participating in our product discussions.

For anything else, join our developers community on Discord.