Adding Navigation Items
Extending the NavMenu
Once you have defined some custom routes in a lazy extension module, you need some way for the administrator to access them. For this you will use the addNavMenuItem and addNavMenuSection functions.
Let’s add a new section to the Admin UI main nav bar containing a link to the “greeter” module from the Using Angular example:
// project/ui-extensions/greeter-shared.module.ts
import { NgModule } from '@angular/core';
import { SharedModule, addNavMenuSection } from '@vendure/admin-ui/core';
@NgModule({
imports: [SharedModule],
providers: [
addNavMenuSection({
id: 'greeter',
label: 'My Extensions',
items: [{
id: 'greeter',
label: 'Greeter',
routerLink: ['/extensions/greet'],
// Icon can be any of https://clarity.design/icons
icon: 'cursor-hand-open',
}],
},
// Add this section before the "settings" section
'settings'),
]
})
export class GreeterSharedModule {}
Now we must also register this new module with the compiler:
// project/vendure-config.ts
ngModules: [
{
type: 'lazy',
route: 'greet',
ngModuleFileName: 'greeter.module.ts',
ngModuleName: 'GreeterModule',
},
{
type: 'shared',
ngModuleFileName: 'greeter-shared.module.ts',
ngModuleName: 'GreeterSharedModule',
}
],
Running the server will compile our new shared module into the app, and the result should look like this:
Overriding existing items
It is also possible to override one of the default (built-in) nav menu sections or items. This can be useful for example if you wish to provide a completely different implementation of the product list view.
This is done by setting the id property to that of an existing nav menu section or item.