Search code examples
kibana-5

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?

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?

Solution

  • You'll also need require('ui/autoload/styles');