Is there a feature where I can add an extra button to the left menu?

[brkngcn]

Is there a feature where I can add an extra button to the left menu?

or can I create extra buttons on the left side by editing the code?

[Korbinian_Butz]

This plugin might give you some pointers. It added a “Bookmarks” entry to the Navigator.

[Hendrik_Naether1 (Hendrik Naether)]

There are several ways how you can tackle that:

• create a cockpit clone (using c8ycli new cockpit)
• create a plugin (using c8ycli and select plugin) to extend an existing application

Independent of the way you go, you will need to use the HOOK_NAVIGATOR_NODES in order to add elements to the side menu. You can even dynamically decide if these should be shown, e.g. if a user has a specific role (by using the canActivate attribute)!

A general description can be found in the Cumulocity IoT Web Development Tutorial - Part 2: Create your first component

---

Hendrik Naether

Software AG Professional Services

[brkngcn]

Thanks for your solution suggestions.

Actually, what I want to do is to edit the html code.

I created a new application with c8ycli new cockpit.

In the screenshot, the class property of the menu appears as “navigatorContent”.

.\node_modules\@c8y\ngx-components\fesm2015\c8y-ngx-components.js

in this file path i find the part in c8y-ngx-components.js file with “navigatorContent”

Code part:

(function () { (typeof ngDevMode === "undefined" || ngDevMode) && ɵngcc0.ɵsetClassMetadata(NavigatorOutletComponent, [{
        type: Component,
        args: [{
                selector: 'c8y-navigator-outlet, c8y-ui-navigator',
                template: "<nav class=\"navigator\" *ngIf=\"isShown$ | async\" [ngClass]=\"{ open: open }\">\n  <ng-content select=\".navigator-slot-top\"></ng-content>\n  <ul class=\"navigatorContent\">\n    <c8y-navigator-node (nodeClick)=\"collapseNavigator($event)\" [node]=\"node\" *ngFor=\"let node of nodes trackBy trackByPathOrLabel\" [isRoot]=\"true\"></c8y-navigator-node>\n  </ul>\n  <ng-content select=\".navigator-slot-bottom\"></ng-content>\n</nav>\n"
            }]
    }], function () { return [{ type: HeaderService }]; }, { open: [{
            type: Input
        }], nodes: [{
            type: Input
        }] }); })();

Between the < ul>< /ul> tags

<a href="https://mywebsite.com/">mywebsite.com</a> 

I add this but nothing happens.

[Tristan_Bastian]

Editing the JS files of the Web SDKs packages is not the intended usecase of the Web SDK and will not be supported here.

Please have a look at Tutorials - Cumulocity IoT Guides for an introduction on how to extend applications using the Web SDK.