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

Elastic Stack Kibana
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?

2

Hey @trex, try adding in:

require('ui/chrome');

like Timelion is doing here

3

Hi @Brandon_Kobel, I have it already.

4

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

5

This I forgot. Now it works.

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

1 Like
8

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