Skip to main content
Announcements
Have questions about Qlik Connect? Join us live on April 10th, at 11 AM ET: SIGN UP NOW
cancel
Showing results for 
Search instead for 
Did you mean: 
Anonymous
Not applicable

How to add custom navMenu items in Qlik Sense Extension?

Hello Everyone,

        I need to add custom menu Items to my qlik sense extension as below:

ss.png        

I have explored a little bit and saw this in the DOM:

```

<a ng-repeat="menuItem in navMenu.items" ng-if="menuItem.isVisible()" ng-class="[menuItem.cssClasses, menuItem.dynamicCssClasses()]" qva-activate="menuItem.action()" q-title-translation="Tooltip.ZoomIn" tid="nav-menu-zoom-in" class="ng-scope lui-icon lui-icon--expand white border" title="Full screen"></a>

```

But I am not sure how to add my custom items in this navMenu, any ideas or suggestions are welcome.

Thank you in advance.

1 Solution

Accepted Solutions
Anonymous
Not applicable
Author

I found the solution while going through the $scope object.

The navMenu object is located at: $scope.$parent.$parent.navMenu

To add custom option, create a object as below:

               var customBtnNavMenu = {

                   'action': $scope.callBackFunction, // main callback function for the nav menu

                   'cssClasses': 'lui-icon lui-icon--cogwheel white border', // css classes

                   'isVisible': isVisible, // call back function to decide visibility

                   'tid': 'nav-menu-custom', // unique identifier

                   'translation': 'My Custom Nav Option' // title that shows up on hovering

               };

Add it to the nav Menu:

                    $scope.$parent.$parent.navMenu.items.push(customBtnNavMenu);

Thank You!

View solution in original post

3 Replies
Anonymous
Not applicable
Author

I found the solution while going through the $scope object.

The navMenu object is located at: $scope.$parent.$parent.navMenu

To add custom option, create a object as below:

               var customBtnNavMenu = {

                   'action': $scope.callBackFunction, // main callback function for the nav menu

                   'cssClasses': 'lui-icon lui-icon--cogwheel white border', // css classes

                   'isVisible': isVisible, // call back function to decide visibility

                   'tid': 'nav-menu-custom', // unique identifier

                   'translation': 'My Custom Nav Option' // title that shows up on hovering

               };

Add it to the nav Menu:

                    $scope.$parent.$parent.navMenu.items.push(customBtnNavMenu);

Thank You!

balabhaskarqlik

That's good, helpful to others.

NitinK7
Specialist
Specialist

Hi,

How can we hide fullscreen icon using custome theme css file