# Using Kibana Directives in Your Plugin

**URL:** <https://discuss.elastic.co/t/using-kibana-directives-in-your-plugin/69303>\
**Category:** Kibana\
**Created:** [December 16, 2016, 3:26pm UTC](https://discuss.elastic.co/t/using-kibana-directives-in-your-plugin/69303 "2016-12-16T15:26:41Z")\
**Posts on this page:** 5\
**Page:** 1

<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:** [December 16, 2016, 3:26pm UTC](https://discuss.elastic.co/t/using-kibana-directives-in-your-plugin/69303/1 "2016-12-16T15:26:41Z")

</div>

I'm attempting to use the kbnTopNav directive in my plugin but so far have come up empty.

In my index.js file of the plugin (root of the plugin), I have this:

```
require: ['kibana', 'elasticsearch'],

```

I'm not entirely sure what that does, but it doesn't seem to hurt. In my `/public/app.js` file (the file that the app.main is pointing to) I have this:

```
var app = uiModules.get('app/myapp', ['kibana']);

```

I then attach the controller to this app variable and have a template:

```
uiRoutes.enable();
uiRoutes
  .when('/', {
    template: template,
    reloadOnSearch: false
  });

```

The template has the very simple `<kbn-top-nav>` element:

```
<kbn-top-nav name="myappname" config="someconfig"></kbn-top-nav>

```

It's not rendering anything, is there something I'm missing with using directives from another module (`kibana/kbnTopNav`?). Has anyone had any luck reusing directives from the kibana module?

---

<div class="post-metadata">

**Author:** ![warkolm](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/warkolm/32/39224_2.png) [@warkolm](https://discuss.elastic.co/u/warkolm)\
**Post date:** [December 19, 2016, 1:29am UTC](https://discuss.elastic.co/t/using-kibana-directives-in-your-plugin/69303/2 "2016-12-19T01:29:34Z")

</div>

Gunna move this to the KB category, the Dev one is a little quiet ☹

---

<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:** [December 19, 2016, 3:35pm UTC](https://discuss.elastic.co/t/using-kibana-directives-in-your-plugin/69303/3 "2016-12-19T15:35:47Z")

</div>

Thank you, I'm still trying to figure out the hotspot of plugin support and resources. Mostly been trial and error-ing this whole time.

I'm currently walking through other plugins to see if they have used any built-in directives, but so far I've come up short. The only app plugin that's listed is one that I'm rewriting (and the existing one doesn't even use the built-in stylesheets of Kibana).

---

<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:** [December 20, 2016, 3:46pm UTC](https://discuss.elastic.co/t/using-kibana-directives-in-your-plugin/69303/4 "2016-12-20T15:46:50Z")

</div>

Solved it (mostly):  
[https://www.elastic.co/guide/en/kibana/current/development-modules.html](https://www.elastic.co/guide/en/kibana/current/development-modules.html)

I just added `import 'ui/autoload/all';` to my `/public/app.js` file and it appears to be working now. I'm going to continue working through it and see if I can narrow down what specific ones I need. `ui/autoload/directives` didn't work at least at first.

---

<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:** [January 17, 2017, 3:46pm UTC](https://discuss.elastic.co/t/using-kibana-directives-in-your-plugin/69303/5 "2017-01-17T15:46:51Z")

</div>

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