custom-header-menu.js

custom-header-menu.js

const search = instantsearch(/* parameters */);

const categoriesToShow = [
  'hombres',
  'mujeres',
  'ninos',
  'calzado',
  'accesorios',
  'marcas',
  'reviews'
]

const makeMenu = instantsearch.connectors.connectMenu(
  function(renderOpts, isFirstRendering) {
    if (isFirstRendering) {
      // add links into header
      $('#header').html(
        categoriesToShow.map(function(cat) {
          return `<li>${cat}</li>`;
        })
      );

      // bind click event to refine the category clicked
      $('#header')
        .find('li')
        .each(function(index) { 
          $(this).on('click', function() {
            renderOpts.refine(categoriesToShow[index]);
          });
        });
    }

    // add class `.active` on selected element
    const refinedItem = renderOpts.items.find(function(item) { return item.isRefined });
    $('#header')
      .find('li')
      .each(function() {
        if ($(this).text() === refinedItem.value) {
          $(this).addClass('active');
        } else {
          $(this).removeClass('active');
        }
      });
  }
);

const customMenu = makeMenu({
  attributeName: 'category', // <- change the attributeName to your category field
});
search.addWidget(customMenu);