# How to use kbn-top-nav menu in a new app?

**URL:** <https://discuss.elastic.co/t/how-to-use-kbn-top-nav-menu-in-a-new-app/86074>\
**Category:** Kibana\
**Created:** [May 17, 2017, 9:34am UTC](https://discuss.elastic.co/t/how-to-use-kbn-top-nav-menu-in-a-new-app/86074 "2017-05-17T09:34:20Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![trex](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/trex/32/34230_2.png) [@trex](https://discuss.elastic.co/u/trex)\
**Post date:** [May 17, 2017, 9:34am UTC](https://discuss.elastic.co/t/how-to-use-kbn-top-nav-menu-in-a-new-app/86074/1 "2017-05-17T09:34:20Z")

</div>

_Kibana 5.2.2_

In my Kibana app, I want to use the kbn-top-nav menu, like it is [done in timelion app](https://github.com/elastic/kibana/blob/master/src/core_plugins/timelion/public/index.html#L3).

I added the line to my template substituting only the name arg:

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

```

In the controller, I added the config array:

```
  $scope.topNavMenu = [ 
    {   
      key: 'home',
      description: 'Home',
      run: function () { kbnUrl.change('/'); }
    },  
    {   
      key: 'about',
      description: 'About',
      run: function () { kbnUrl.change('/about'); }
    }   
  ];  

```

But I don't see any menu on the top. How to use kbn-top-nav properly?

**Update** :  
I imported the directive in my app.js `import 'ui/kbn_top_nav';` and now I see a raw menu list without any styling. How to get styles properly?

---

<div class="post-metadata">

**Author:** ![Brandon\_Kobel](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/brandon_kobel/32/14829_2.png) [@Brandon\_Kobel](https://discuss.elastic.co/u/Brandon_Kobel)\
**Post date:** [May 17, 2017, 12:10pm UTC](https://discuss.elastic.co/t/how-to-use-kbn-top-nav-menu-in-a-new-app/86074/2 "2017-05-17T12:10:31Z")

</div>

Hey @trex, try adding in:

```auto
require('ui/chrome');

```

like Timelion is doing [here](https://github.com/elastic/kibana/blob/master/src/core_plugins/timelion/public/app.js#L19)

---

<div class="post-metadata">

**Author:** ![trex](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/trex/32/34230_2.png) [@trex](https://discuss.elastic.co/u/trex)\
**Post date:** [May 17, 2017, 12:26pm UTC](https://discuss.elastic.co/t/how-to-use-kbn-top-nav-menu-in-a-new-app/86074/3 "2017-05-17T12:26:34Z")

</div>

Hi @Brandon_Kobel, I have it already.

---

<div class="post-metadata">

**Author:** ![Brandon\_Kobel](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/brandon_kobel/32/14829_2.png) [@Brandon\_Kobel](https://discuss.elastic.co/u/Brandon_Kobel)\
**Post date:** [May 17, 2017, 3:43pm UTC](https://discuss.elastic.co/t/how-to-use-kbn-top-nav-menu-in-a-new-app/86074/4 "2017-05-17T15:43:53Z")

</div>

@trex do you also have `import 'ui/autoload/styles';` or `require('ui/autoload/styles');` ?

---

<div class="post-metadata">

**Author:** ![trex](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/trex/32/34230_2.png) [@trex](https://discuss.elastic.co/u/trex)\
**Post date:** [May 17, 2017, 4:05pm UTC](https://discuss.elastic.co/t/how-to-use-kbn-top-nav-menu-in-a-new-app/86074/5 "2017-05-17T16:05:14Z")

</div>

This I forgot. Now it works.

---

<div class="post-metadata">

**Author:** ![Brandon\_Kobel](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/brandon_kobel/32/14829_2.png) [@Brandon\_Kobel](https://discuss.elastic.co/u/Brandon_Kobel)\
**Post date:** [May 17, 2017, 4:05pm UTC](https://discuss.elastic.co/t/how-to-use-kbn-top-nav-menu-in-a-new-app/86074/6 "2017-05-17T16:05:57Z")

</div>

@trex awesome! I'm glad you got it working.

---

<div class="post-metadata">

**Author:** ![trex](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/trex/32/34230_2.png) [@trex](https://discuss.elastic.co/u/trex)\
**Post date:** [May 17, 2017, 4:06pm UTC](https://discuss.elastic.co/t/how-to-use-kbn-top-nav-menu-in-a-new-app/86074/7 "2017-05-17T16:06:09Z")

</div>

If you want, you can post your answer on my SO question too [http://stackoverflow.com/questions/44020954/how-to-use-kbn-top-nav-menu-in-a-new-app](http://stackoverflow.com/questions/44020954/how-to-use-kbn-top-nav-menu-in-a-new-app)

---

<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 14, 2017, 4:06pm UTC](https://discuss.elastic.co/t/how-to-use-kbn-top-nav-menu-in-a-new-app/86074/8 "2017-06-14T16:06:14Z")

</div>

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