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


Kibana 5.2.2

In my Kibana app, I want to use the kbn-top-nav menu, like it is done in timelion app.

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?

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?

(Brandon Kobel) #2

Hey @trex, try adding in:


like Timelion is doing here


Hi @Brandon_Kobel, I have it already.

(Brandon Kobel) #4

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


This I forgot. Now it works.

(Brandon Kobel) #6

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


If you want, you can post your answer on my SO question too

(system) #8

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