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


#1

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?

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?


(Brandon Kobel) #2

Hey @trex, try adding in:

require('ui/chrome');

like Timelion is doing here


#3

Hi @Brandon_Kobel, I have it already.


(Brandon Kobel) #4

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


#5

This I forgot. Now it works.


(Brandon Kobel) #6

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


#7

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


(system) #8

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