# Dev on Kibana plugin: navbar icon disappear when switching tabs

**URL:** <https://discuss.elastic.co/t/dev-on-kibana-plugin-navbar-icon-disappear-when-switching-tabs/66612>\
**Category:** Kibana\
**Created:** [November 19, 2016, 8:04am UTC](https://discuss.elastic.co/t/dev-on-kibana-plugin-navbar-icon-disappear-when-switching-tabs/66612 "2016-11-19T08:04:20Z")\
**Posts on this page:** 1\
**Showing post:** 2

<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:** [November 22, 2016, 10:30pm UTC](https://discuss.elastic.co/t/dev-on-kibana-plugin-navbar-icon-disappear-when-switching-tabs/66612/2 "2016-11-22T22:30:38Z")

</div>

Are you using the `uiExports: { navbarExtensions: [...] }` definition in your plugin, or are you using a `hack`? It's not really clear from your comment. If you are using `navbarExtensions`, then the control shouldn't disappear like that. If you're injecting it with a hack, using jquery or something, then that could explain what you're seeing.

Anyway, using navbarExtensions is actually pretty easy, if poorly documented (and not having a lot of examples). Essentially, you add the following to your plugin definition:

```auto
uiExports: {
      navbarExtensions: [
        'plugins/<your-plugin-name>/<path-to-file>',
      ]
}

```

Do that for every control you want to add. Next, you register your navbarExtension so that it loads in the app(s) you'd like. The comments in `kbn_top_nav.js` are helpful here, since that's where navbarExtensions inject themselves:

```auto
/*
* @param {Array<Object>|KbnTopNavController} config
* @param {string} config[].key
* - the uniq key for this menu item.
* @param {string} [config[].label]
* - optional, string that will be displayed for the menu button.
* Defaults to the key
* @param {string} [config[].description]
* - optional, used for the screen-reader description of this menu
* item, defaults to "Toggle ${key} view" for templated menu items
* and just "${key}" for programatic menu items
* @param {boolean} [config[].hideButton]
* - optional, set to true to prevent a menu item from being created.
* This allow injecting templates into the navbar that don't have
* an associated template
* @param {function} [config[].run]
* - optional, function to call when the menu item is clicked, defaults
* to toggling the template
*/

```

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. And for basic functionality, you'll probably want a `run` property as well. So we're left with something like this:

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

function discoverControlProvider() {
  return {
    appName: 'discover',
    key: 'plugin-name-discover',
    label: 'Click Me',
    run: () => { alert('hey, quit poking me!'); },
  };
}

navbarExtensions.register(discoverControlProvider);

```

Here, `discoverControlProvider` can use Angular's dependency injection, so if you need to inject any custom logic to customize the display, or add a tooltip, or show/hide/disable the button, that can be pretty handy. If you want to get really fancy, you can use the `template` property, which will be evaluated in Angular. With that you can run any custom directive you want, so you can open up a config menu with a bunch of custom controls, for example, which is exactly how Reporting works.

I hope that helps.

---

_[View the full topic](https://discuss.elastic.co/t/dev-on-kibana-plugin-navbar-icon-disappear-when-switching-tabs/66612)._