# How to add filter panel in kibana custom plugin **URL:** \ **Category:** Kibana\ **Created:** [July 29, 2020, 2:48pm UTC](https://discuss.elastic.co/t/how-to-add-filter-panel-in-kibana-custom-plugin/243080 "2020-07-29T14:48:57Z")\ **Posts on this page:** 11\ **Page:** 1
**Author:** ![Tejashree\_kate](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/tejashree_kate/32/47095_2.png) [@Tejashree\_kate](https://discuss.elastic.co/u/Tejashree_kate)\ **Post date:** [July 29, 2020, 2:48pm UTC](https://discuss.elastic.co/t/how-to-add-filter-panel-in-kibana-custom-plugin/243080/1 "2020-07-29T14:48:57Z")
Hi I am trying to develop a custom kibana plugin and want to add the filter bar to my plugin similar to the one in discover How can I add the filter bar to mu custom kibana plugin? ---
**Author:** ![aaron-nimocks](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/aaron-nimocks/32/73965_2.png) [@aaron-nimocks](https://discuss.elastic.co/u/aaron-nimocks)\ **Post date:** [July 29, 2020, 2:59pm UTC](https://discuss.elastic.co/t/how-to-add-filter-panel-in-kibana-custom-plugin/243080/2 "2020-07-29T14:59:25Z")
Are you using Elastic UI Framework? > **[Elastic UI Framework | Elastic UI Framework](https://eui.elastic.co/)** > > The framework powering the Elastic Stack If so you can just add a filter to your search like in the example below. ```auto const search = { toolsLeft: renderToolsLeft(), toolsRight: renderToolsRight(), box: { incremental: true, }, filters: [ { type: 'field_value_selection', field: 'nationality', name: 'Nationality', multiSelect: false, options: store.countries.map(country => ({ value: country.code, name: country.name, view: `${country.flag} ${country.name}`, })), }, ], }; ``` ---
**Author:** ![Tejashree\_kate](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/tejashree_kate/32/47095_2.png) [@Tejashree\_kate](https://discuss.elastic.co/u/Tejashree_kate)\ **Post date:** [July 29, 2020, 3:14pm UTC](https://discuss.elastic.co/t/how-to-add-filter-panel-in-kibana-custom-plugin/243080/3 "2020-07-29T15:14:51Z")
Thanks for your suggestion. I am looking for a filter bar similar to Discover plugin. IS there a way I can use it? ---
**Author:** ![aaron-nimocks](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/aaron-nimocks/32/73965_2.png) [@aaron-nimocks](https://discuss.elastic.co/u/aaron-nimocks)\ **Post date:** [July 29, 2020, 3:27pm UTC](https://discuss.elastic.co/t/how-to-add-filter-panel-in-kibana-custom-plugin/243080/4 "2020-07-29T15:27:28Z")
Can you be more specific? Which filter bar on the discover page? I think all of them are built on the functionality I posted above. ---
**Author:** ![Tejashree\_kate](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/tejashree_kate/32/47095_2.png) [@Tejashree\_kate](https://discuss.elastic.co/u/Tejashree_kate)\ **Post date:** [July 29, 2020, 3:34pm UTC](https://discuss.elastic.co/t/how-to-add-filter-panel-in-kibana-custom-plugin/243080/5 "2020-07-29T15:34:33Z")
The one where in I can add a filter ![image](https://us1.discourse-cdn.com/elastic/original/3X/8/9/89c499d6b13318964d9ccc9fa50db8ccb52d4ffb.png) ---
**Author:** ![aaron-nimocks](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/aaron-nimocks/32/73965_2.png) [@aaron-nimocks](https://discuss.elastic.co/u/aaron-nimocks)\ **Post date:** [July 29, 2020, 3:39pm UTC](https://discuss.elastic.co/t/how-to-add-filter-panel-in-kibana-custom-plugin/243080/6 "2020-07-29T15:39:54Z")
Not an easy question to answer but here is the source code to how that is done. > ---
**Author:** ![Liza\_Katz](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/liza_katz/32/52358_2.png) [@Liza\_Katz](https://discuss.elastic.co/u/Liza_Katz)\ **Post date:** [July 29, 2020, 4:07pm UTC](https://discuss.elastic.co/t/how-to-add-filter-panel-in-kibana-custom-plugin/243080/7 "2020-07-29T16:07:05Z")
Hi @ [Tejashree\_kate](https://discuss.elastic.co/u/Tejashree_kate) Thank you for this question. We have been putting quite a lot of effort in the past year, making our services and UI components reusable by community members. One of those components is `TopNavMenu`, which contains the menu items (like the Save links), the query string input area, time picker and filter bar. I have recently made an example plugin, and part of is is using the entire navigation panel and consuming it. You can take a look at this PR: - [This block](https://github.com/elastic/kibana/pull/71679/files#diff-0e391fdf69c20924b87e27593f70ed6dR148) renders the entire navigation panel, with minimal configuration: - [This block](https://github.com/elastic/kibana/pull/71679/files#diff-0e391fdf69c20924b87e27593f70ed6dR73) subscribes to any changes in the navigation panel: - [This block](https://github.com/elastic/kibana/pull/71679/files#diff-0e391fdf69c20924b87e27593f70ed6dR89) consumes the values from the navigation panel to generate an ElasticSearch request. I would also recommend using the `plugin generator` to generate the boilerplate for your plugin. The generated plugin already contains the `TopNavMenu` component, in a structure similar to that of the example plugin mentioned above. See [this PR](https://github.com/elastic/kibana/pull/55281) for more information on the plugin generator. I would love to hear any feedback you have. Feel free to even post it on that PR. Thanks, Liza ---
**Author:** ![ylasri](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/ylasri/32/86120_2.png) [@ylasri](https://discuss.elastic.co/u/ylasri)\ **Post date:** [July 29, 2020, 5:04pm UTC](https://discuss.elastic.co/t/how-to-add-filter-panel-in-kibana-custom-plugin/243080/9 "2020-07-29T17:04:30Z")
Thanks @Liza_Katz for the example It was little hard to find it last week, as it's not yet merged with examples in the master branch of Kibana. That save me a lot of work creating new logic for search in my plugin, all my plugins now include `TopNavMenu` Thanks again for the great job you are doing for the community ---
**Author:** ![Liza\_Katz](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/liza_katz/32/52358_2.png) [@Liza\_Katz](https://discuss.elastic.co/u/Liza_Katz)\ **Post date:** [July 30, 2020, 5:49am UTC](https://discuss.elastic.co/t/how-to-add-filter-panel-in-kibana-custom-plugin/243080/10 "2020-07-30T05:49:06Z")
@ylasri So glad to hear you found it useful. If you like, feel free to share a link with me. I would love to check it out. ---
**Author:** ![ylasri](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/ylasri/32/86120_2.png) [@ylasri](https://discuss.elastic.co/u/ylasri)\ **Post date:** [August 1, 2020, 12:12am UTC](https://discuss.elastic.co/t/how-to-add-filter-panel-in-kibana-custom-plugin/243080/11 "2020-08-01T00:12:32Z")
Thanks @Liza_Katz Yes please feel free to review my example and share your comments. The example is very basic et re-use most of the example your provide. > **[synapticiel/np\_search\_example](https://github.com/synapticiel/np_search_example)** > > Example of kibana new platform plugin for search with TopNavMenu - synapticiel/np\_search\_example ---
**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\ **Post date:** [August 29, 2020, 12:12am UTC](https://discuss.elastic.co/t/how-to-add-filter-panel-in-kibana-custom-plugin/243080/12 "2020-08-29T00:12:39Z")
This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.