Use algolia to display an article


I have the following use case.

On this screen, I have a breadcrumb on top, a hierarchical menu on the left side, and the results (list of articles, grouped by category and subcategory) are displayed on the right side.


Below is a how a record look like for each article

When I click on an article, I want to display the article on the right side, but also keep the hierarchical menu and breadcrumb synced with the selected article, like the following screen :

I don’t know how to do that properly.

Here is how I set up the facets :

I suppose I should use the url to sync with the ui but how to directly display the article based on the articleID ? Am I in the wrong path trying to use Algolia to display the article ?

Thx for your answer.

I am stuck for a few days now

Hi @thierry.lau, Algolia is usually used for the search to find the correct article and then use your original data source to pull the actual article to display based on an ID or some other identifying information. Or do I misunderstand your question?

hi Cindy

Thx for your reply.

I understand that I should use the articleID to display an articleID. However, on the found article page, how can I restore the Hierarchical Menu so the right category and subcategory are automatically displayed based on the article ?

Best regards

Hi Thierry,
What you could do when an article link is clicked, would be to trigger a new search to Algolia with the article ID, and have a rendering function that displays normal results when there are multiple hits, but directly the article content when there is a single result.
That way you will stay inside the InstantSearch implem, so the breadcrumbs will stay synced.

Hi Sylvain

Thx for the answer

This seems to be a good way but the question is How To trigger a new Search to Algolia with the article ID ?

Should I use a special Algolia component or Connector ?

Best regards

Hello @thierry.lau,

I know we resolved a separate question here. Could you let us know if this current thread is still an open question and, if so, clarify what you would like to achieve?

Thank you


This current thread is still an open question since my last question is not answered yet.


Hi @thierry.lau

Here’s an example for you. There can be many ways to implement this, but this might be a good starter for you.

If you want the article view to have its own URL, then you might want to tweak the routing.
Let me know if it works for you and if you need any help with the routing.
(hint: add a new param to routing state, which is like view-article=xxx and make it display the article when it’s given)

1 Like


I see the idea.

Thx for the reply !