# Plugin as navbarExtension

**URL:** <https://discuss.elastic.co/t/plugin-as-navbarextension/84230>\
**Category:** Kibana\
**Created:** [May 2, 2017, 9:37am UTC](https://discuss.elastic.co/t/plugin-as-navbarextension/84230 "2017-05-02T09:37:43Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![valereds](https://avatars.discourse-cdn.com/v4/letter/v/f19dbf/32.png) [@valereds](https://discuss.elastic.co/u/valereds)\
**Post date:** [May 2, 2017, 9:37am UTC](https://discuss.elastic.co/t/plugin-as-navbarextension/84230/1 "2017-05-02T09:37:43Z")

</div>

Hi all,  
I' m trying to make a navbarExtension plugin but don't know why I can't see it in the localMenu.  
The structure of plugins is:

![](https://us1.discourse-cdn.com/elastic/original/3X/1/1/119d8c347af32c519287f21277f2c23ac732b0d0.jpg)

Inside my index.js I'm going to return a navbarExtensions plugin, like this:

```
export default function (kibana) {
  return new kibana.Plugin({
    uiExports: {
      navbarExtensions: ['plugins/my-navbar-ext/zoom']
    }
  });
};

```

And in my zoom.js file I'm going to register it:

```
const navbarExtensions = require('ui/registry/navbar_extensions');

function ZoomButtonProvider() {
  return {
    appName: 'my-navbar-ext',
    key: 'zoom-out-button',
    label: 'Zoom Out',
    run: () => { alert('This is a test'); },
  };
}

navbarExtensions.register(ZoomButtonProvider);

```

Can anyone help me?

ps. I'm using Kibana 5.1.2 version

---

<div class="post-metadata">

**Author:** ![Joe\_Fleming](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/joe_fleming/32/3561_2.png) [@Joe\_Fleming](https://discuss.elastic.co/u/Joe_Fleming)\
**Post date:** [May 3, 2017, 5:50pm UTC](https://discuss.elastic.co/t/plugin-as-navbarextension/84230/2 "2017-05-03T17:50:23Z")

</div>

I posted this a while ago as a reply to another question, which is a pretty comprehensive guide to creating navbarExtensions: [Dev on Kibana plugin: navbar icon disappear when switching tabs](https://discuss.elastic.co/t/dev-on-kibana-plugin-navbar-icon-disappear-when-switching-tabs/66612). Your code here looks almost exactly the same as what I posted there, so perhaps you already found that ;).

The problem here is with the `appName` in your provider. From that thread:

> You will need to define, at a minimum, an appName (the name of the app to inject into), a unique key, and I'd encourage you to add a label too since it'll display that text then, which can be more user-friendly.

`appName` is actually the name of the app you are trying to inject the button into, not the name of your app. So, for example, if you are trying to add a button to the Discover app, you would use `discover`, as that's the `name` attribute used in the `kbn-top-nav` directive. If you'd like to inject a navbar button into another app, refer to its `kbn-top-nav` use, and set the `appName` in your provider to match the `name` used in the template.

Most of the names are exactly what you would expect them to be. `discover`, `visualize`, `dashboard`, `devtools`... and it's pretty easy to look up by just searching the codebase for the `kbn-top-nav` directive. Just keep in mind that you have to register a nav control for every app you want to put a button in.

---

<div class="post-metadata">

**Author:** ![valereds](https://avatars.discourse-cdn.com/v4/letter/v/f19dbf/32.png) [@valereds](https://discuss.elastic.co/u/valereds)\
**Post date:** [May 4, 2017, 7:01am UTC](https://discuss.elastic.co/t/plugin-as-navbarextension/84230/3 "2017-05-04T07:01:45Z")

</div>

Hi @Joe_Fleming, in fact after debuggin my code I found that the problem was `appName`.  
Changed it to `dashboard` and I have it on the dashboard app navbar.  
Thank you again for the answer, hope this will be helpfull for someone in the future.

---

<div class="post-metadata">

**Author:** ![whoami](https://avatars.discourse-cdn.com/v4/letter/w/a9a28c/32.png) [@whoami](https://discuss.elastic.co/u/whoami)\
**Post date:** [May 26, 2017, 11:36am UTC](https://discuss.elastic.co/t/plugin-as-navbarextension/84230/4 "2017-05-26T11:36:07Z")

</div>

> [@valereds](#):
>
> const navbarExtensions = require('ui/registry/navbar\_extensions');
> 
> function ZoomButtonProvider() {  
> return {  
> appName: 'my-navbar-ext',  
> key: 'zoom-out-button',  
> label: 'Zoom Out',  
> run: () =\> { alert('This is a test'); },  
> };  
> }
> 
> navbarExtensions.register(ZoomButtonProvider);

hi @valereds I try this in kibana 5.4, but I did not see any navbar in dashboard. could you please post a gif to explain where is the navbar

---

<div class="post-metadata">

**Author:** ![valereds](https://avatars.discourse-cdn.com/v4/letter/v/f19dbf/32.png) [@valereds](https://discuss.elastic.co/u/valereds)\
**Post date:** [May 26, 2017, 12:03pm UTC](https://discuss.elastic.co/t/plugin-as-navbarextension/84230/5 "2017-05-26T12:03:17Z")

</div>

![](https://us1.discourse-cdn.com/elastic/original/3X/7/7/77519f6dc00aa81dd7a9173a04f9d8fe410e99f7.png)

Hi @whoami,  
this is the navbar in dashboard, with my zoom-out button.

---

<div class="post-metadata">

**Author:** ![whoami](https://avatars.discourse-cdn.com/v4/letter/w/a9a28c/32.png) [@whoami](https://discuss.elastic.co/u/whoami)\
**Post date:** [May 26, 2017, 12:05pm UTC](https://discuss.elastic.co/t/plugin-as-navbarextension/84230/6 "2017-05-26T12:05:13Z")

</div>

@valereds thanks very much, could you please give a full example of this demo zoom-out plugin

---

<div class="post-metadata">

**Author:** ![whoami](https://avatars.discourse-cdn.com/v4/letter/w/a9a28c/32.png) [@whoami](https://discuss.elastic.co/u/whoami)\
**Post date:** [May 26, 2017, 12:09pm UTC](https://discuss.elastic.co/t/plugin-as-navbarextension/84230/7 "2017-05-26T12:09:38Z")

</div>

everything is ok, thanks anymore. seems i have to clean the bundles optimized,

---

<div class="post-metadata">

**Author:** ![valereds](https://avatars.discourse-cdn.com/v4/letter/v/f19dbf/32.png) [@valereds](https://discuss.elastic.co/u/valereds)\
**Post date:** [May 26, 2017, 12:19pm UTC](https://discuss.elastic.co/t/plugin-as-navbarextension/84230/8 "2017-05-26T12:19:04Z")

</div>

Yes you're right. Firstclean the optimized bundles if you make changes...

---

<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:** [June 23, 2017, 12:19pm UTC](https://discuss.elastic.co/t/plugin-as-navbarextension/84230/9 "2017-06-23T12:19:08Z")

</div>

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