# Add new button to visualizations' top navbar

**URL:** <https://discuss.elastic.co/t/add-new-button-to-visualizations-top-navbar/286931>\
**Category:** Kibana\
**Tags:** kibana-plugin-development\
**Created:** [October 17, 2021, 3:25pm UTC](https://discuss.elastic.co/t/add-new-button-to-visualizations-top-navbar/286931 "2021-10-17T15:25:09Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![aza-zil](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/aza-zil/32/92217_2.png) [@aza-zil](https://discuss.elastic.co/u/aza-zil)\
**Post date:** [October 17, 2021, 3:25pm UTC](https://discuss.elastic.co/t/add-new-button-to-visualizations-top-navbar/286931/1 "2021-10-17T15:25:09Z")

</div>

I am creating a Kibana plugin, and I want to add a new plugin, so I need to add a button on the top navbar of the visualization pages. I have two questions:  
1- how do I add the button?  
2- how can I access the data/request in the visualzition using also my plugin (like when I click the new button)?

For the first question, I did this:

```auto
import { NavigationPublicPluginSetup } from '../../../src/plugins/navigation/public/types';

interface PluginSetupDeps {
  navigation: NavigationPublicPluginSetup;
}

export class MyPlugin implements Plugin<MyPluginSetup, MyPluginStart> {
  public setup(core: CoreSetup, { navigation }: PluginSetupDeps) {
    const customExtension = {
      id: 'plugin-prop',
      label: 'Click Me', // [optional] label to use, otherwise it uses whatever you put in 'key'
      run: () => {
        alert('hi');
      },
    };
    navigation.registerMenuItem(customExtension);
    return {};
  }

  public start(core: CoreStart) {
    return {};
  }

  public stop() {}
}

```

but the 'navigation' was undefined. Is 'NavigationPublicPluginSetup ' right? or what is the wrong?

Thanks.

---

<div class="post-metadata">

**Author:** ![Dzmitry](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/dzmitry/32/65026_2.png) [@Dzmitry](https://discuss.elastic.co/u/Dzmitry)\
**Post date:** [October 20, 2021, 2:06pm UTC](https://discuss.elastic.co/t/add-new-button-to-visualizations-top-navbar/286931/2 "2021-10-20T14:06:21Z")

</div>

Hi @aza-zil ,

I suggest using [official plugin generator](https://github.com/elastic/kibana/tree/7.15/packages/kbn-plugin-generator) tool and you can get more information about external plugin development [here](https://www.elastic.co/guide/en/kibana/current/external-plugin-development.html)

Make sure you follow [development guide](https://www.elastic.co/guide/en/kibana/current/development.html) and build the plugins

Let me know if it works after you follow the guide.

Regards, Dzmitry

---

<div class="post-metadata">

**Author:** ![aza-zil](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/aza-zil/32/92217_2.png) [@aza-zil](https://discuss.elastic.co/u/aza-zil)\
**Post date:** [October 21, 2021, 7:08am UTC](https://discuss.elastic.co/t/add-new-button-to-visualizations-top-navbar/286931/3 "2021-10-21T07:08:07Z")

</div>

Thank you @Dzmitry , Sorry I did not update the question. I was using the provided code in the server side, while it was supposed to be in the public side.

Now the second part remains. I want to get the request (located in inspector) using my plugin, any idea on how to do it?

---

<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:** [November 18, 2021, 7:08am UTC](https://discuss.elastic.co/t/add-new-button-to-visualizations-top-navbar/286931/4 "2021-11-18T07:08:53Z")

</div>

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