# Change Kibana UI

**URL:** <https://discuss.elastic.co/t/change-kibana-ui/77439>\
**Category:** Kibana\
**Created:** [March 6, 2017, 4:51am UTC](https://discuss.elastic.co/t/change-kibana-ui/77439 "2017-03-06T04:51:25Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![sundarcse1216](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/sundarcse1216/32/29349_2.png) [@sundarcse1216](https://discuss.elastic.co/u/sundarcse1216)\
**Post date:** [March 6, 2017, 4:51am UTC](https://discuss.elastic.co/t/change-kibana-ui/77439/1 "2017-03-06T04:51:25Z")

</div>

Hi All,

I am using elasticsearch5.1.1 and kibana5.1.1  
I have to add one drop-down in Discover page. is this possible?  
Please guide me .

Thanks,  
Sundar

---

<div class="post-metadata">

**Author:** ![Kikketer](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/kikketer/32/13813_2.png) [@Kikketer](https://discuss.elastic.co/u/Kikketer)\
**Post date:** [March 6, 2017, 2:28pm UTC](https://discuss.elastic.co/t/change-kibana-ui/77439/2 "2017-03-06T14:28:39Z")

</div>

I would need more clarification as to "add a dropdown".  
What information would be in this dropdown?  
Where would this dropdown need to be placed within Discover?

Wild guess is that you could either get by with a hack, a document visualization, or modifying the Discover plugin code directly.

---

<div class="post-metadata">

**Author:** ![sundarcse1216](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/sundarcse1216/32/29349_2.png) [@sundarcse1216](https://discuss.elastic.co/u/sundarcse1216)\
**Post date:** [March 9, 2017, 9:11am UTC](https://discuss.elastic.co/t/change-kibana-ui/77439/3 "2017-03-09T09:11:08Z")

</div>

Thanks Kikketer,  
I need to place this droop-down in top of search box in Discover Page.  
The drop-down information is something link places.  
After select this drop-down. I need to give some action, ill take care about this action.  
In initially i need how to edit Discover page code for Add drop-down.

Thanks,  
Sundar

---

<div class="post-metadata">

**Author:** ![Kikketer](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/kikketer/32/13813_2.png) [@Kikketer](https://discuss.elastic.co/u/Kikketer)\
**Post date:** [March 9, 2017, 2:48pm UTC](https://discuss.elastic.co/t/change-kibana-ui/77439/4 "2017-03-09T14:48:16Z")

</div>

I haven't yet attacked this type of thing in Discover (although it may be soon). I would use a hack plugin to sniff out the location you want to add the dropdown and inject it into the DOM.

Here's a super basic example. Obviously you may want to do this differently but the key portions are here:

```auto
var select = document.createElement('select')
var option = document.createElement('option')
option.innerText = 'Something'

select.appendChild(option)

document.querySelector('.kuiLocalNavRow').appendChild(select)

```

---

<div class="post-metadata">

**Author:** ![sundarcse1216](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/sundarcse1216/32/29349_2.png) [@sundarcse1216](https://discuss.elastic.co/u/sundarcse1216)\
**Post date:** [March 10, 2017, 5:56am UTC](https://discuss.elastic.co/t/change-kibana-ui/77439/5 "2017-03-10T05:56:38Z")

</div>

Ok Kikketer, But where to place this code?  
which file?  
How to find particular file?

Thanks,  
Sundar

---

<div class="post-metadata">

**Author:** ![Kikketer](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/kikketer/32/13813_2.png) [@Kikketer](https://discuss.elastic.co/u/Kikketer)\
**Post date:** [March 10, 2017, 4:10pm UTC](https://discuss.elastic.co/t/change-kibana-ui/77439/6 "2017-03-10T16:10:16Z")

</div>

Sorry I assumed. A "hack" plugin is a plugin:

> **[elastic/generator-kibana-plugin](https://github.com/elastic/generator-kibana-plugin)**
>
> generator-kibana-plugin - DEPRECATED Yeoman Generator for Kibana Plugins, please use https://github.com/elastic/template-kibana-plugin/

That generator will get you started. There's even an example "hack" type in there. Just remember that the hack style plugin will be run on EVERYTHING. So you will want to make sure you are on the Discover tab (either using a URL match or other means) before you inject things.

---

<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:** [April 7, 2017, 4:10pm UTC](https://discuss.elastic.co/t/change-kibana-ui/77439/7 "2017-04-07T16:10:27Z")

</div>

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