# How to involve KQL search bar in Kibana Plugin

**URL:** <https://discuss.elastic.co/t/how-to-involve-kql-search-bar-in-kibana-plugin/283153>\
**Category:** Kibana\
**Tags:** kibana-plugin-development\
**Created:** [September 2, 2021, 9:56am UTC](https://discuss.elastic.co/t/how-to-involve-kql-search-bar-in-kibana-plugin/283153 "2021-09-02T09:56:49Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![yyyayo](https://avatars.discourse-cdn.com/v4/letter/y/76d3ee/32.png) [@yyyayo](https://discuss.elastic.co/u/yyyayo)\
**Post date:** [September 2, 2021, 9:56am UTC](https://discuss.elastic.co/t/how-to-involve-kql-search-bar-in-kibana-plugin/283153/1 "2021-09-02T09:56:49Z")

</div>

Are there any ways I can have this KQL search bar in my own plugin? By default, the plugin only contains the time filter on the right.

 ![Screenshot 2021-09-02 at 5.52.37 PM](https://us1.discourse-cdn.com/elastic/original/3X/2/a/2a37e31d07be29e0eaf53b5cb149f2d0cadc4f0c.png)

---

<div class="post-metadata">

**Author:** ![ppisljar](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/ppisljar/32/11588_2.png) [@ppisljar](https://discuss.elastic.co/u/ppisljar)\
**Post date:** [September 6, 2021, 9:23am UTC](https://discuss.elastic.co/t/how-to-involve-kql-search-bar-in-kibana-plugin/283153/2 "2021-09-06T09:23:59Z")

</div>

you can use `plugins.data.ui.SearchBar`, take a look at how discover, dashboard or visualize app do it.

---

<div class="post-metadata">

**Author:** ![yyyayo](https://avatars.discourse-cdn.com/v4/letter/y/76d3ee/32.png) [@yyyayo](https://discuss.elastic.co/u/yyyayo)\
**Post date:** [September 9, 2021, 8:19am UTC](https://discuss.elastic.co/t/how-to-involve-kql-search-bar-in-kibana-plugin/283153/4 "2021-09-09T08:19:25Z")

</div>

Is SearchBar included in TopNavMenu? I searched SearchBar in Discover and Dashboard apps and couldn't find it. But I found this: [https://github.com/elastic/kibana/tree/7.14/src/plugins/discover/public/application/apps/main/components/top\_nav](https://github.com/elastic/kibana/tree/7.14/src/plugins/discover/public/application/apps/main/components/top_nav), which looked like something related to SearchBar. Could you help me check this?

---

<div class="post-metadata">

**Author:** ![chbas](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/chbas/32/42023_2.png) [@chbas](https://discuss.elastic.co/u/chbas)\
**Post date:** [October 1, 2021, 9:19am UTC](https://discuss.elastic.co/t/how-to-involve-kql-search-bar-in-kibana-plugin/283153/6 "2021-10-01T09:19:19Z")

</div>

In your app.tsx file, simply enable the searchbar and the filters:

`<navigation.ui.TopNavMenu appName={PLUGIN_ID} showSearchBar={true} showFilterBar={false} ....`

---

<div class="post-metadata">

**Author:** ![dosant](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/dosant/32/64489_2.png) [@dosant](https://discuss.elastic.co/u/dosant)\
**Post date:** [October 1, 2021, 9:40am UTC](https://discuss.elastic.co/t/how-to-involve-kql-search-bar-in-kibana-plugin/283153/7 "2021-10-01T09:40:42Z")

</div>

There is an example app for search [here](https://github.com/elastic/kibana/tree/master/examples/search_examples/public)

It shows how to build an app with KQL search which uses data plugin to run searches.  
A sample navbar usage is [here](https://github.com/elastic/kibana/blob/ff96b66eae26679f2ab79b02e104cfac098e25eb/examples/search_examples/public/search/app.tsx#L451-L456)

to run Kibana with examples plugins: `yarn start --run-examples` and you will see a `Developer examples` section in Kibana's navigation

---

<div class="post-metadata">

**Author:** ![yyyayo](https://avatars.discourse-cdn.com/v4/letter/y/76d3ee/32.png) [@yyyayo](https://discuss.elastic.co/u/yyyayo)\
**Post date:** [October 1, 2021, 6:55pm UTC](https://discuss.elastic.co/t/how-to-involve-kql-search-bar-in-kibana-plugin/283153/8 "2021-10-01T18:55:46Z")

</div>

Thanks! I have checked the [search\_examples](https://github.com/elastic/kibana/tree/master/examples/search_examples) you mentioned and successfully integrated the search bar into my plugin.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [October 29, 2021, 6:55pm UTC](https://discuss.elastic.co/t/how-to-involve-kql-search-bar-in-kibana-plugin/283153/9 "2021-10-29T18:55:51Z")

</div>

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.