Custom navigation menu

Custom navigation menu

This help article shows how to override default navigation menu.

  1. Open app.module.ts file located in client\src\app folder, import AppComponent from ./app.component and replace AppDeclarations with PageDeclarations from ./app.module-generated. Register AppComponent and PageDeclarations in NgModule declarations:

    Default app.module.ts

    import { NgModule } from '@angular/core';
       
    import { AppImports, AppComponent, AppDeclarations, AppProviders } from './app.module-generated';
       
    @NgModule({
      declarations: [
        ...AppDeclarations
      ],
      imports: [
        ...AppImports
      ],
      providers: [
        ...AppProviders
      ],
      bootstrap: [AppComponent]
    })
    export class AppModule {
    }
    

    Custom app.module.ts

    import { NgModule } from '@angular/core';
       
    import { AppImports, PageDeclarations, AppProviders } from './app.module-generated';
    import { AppComponent } from './app.component';
       
    @NgModule({
      declarations: [
        AppComponent, ...PageDeclarations
      ],
      imports: [
        ...AppImports
      ],
      providers: [
        ...AppProviders
      ],
      bootstrap: [AppComponent]
    })
    export class AppModule {
    }
    
  2. Add CustomNavigationMenuComponent with desired template, pages property and navigation-menu selector and register the new component in NgModule declarations:

    import { Component, Input, NgModule } from '@angular/core';
       
    import { AppImports, PageDeclarations, AppProviders } from './app.module-generated';
       
    import { AppComponent } from './app.component';
       
    @Component({
    selector: 'navigation-menu',
    template: `
    <ul class="ultima-menu ultima-main-menu clearfix">
        <li routerLinkActive="active-menuitem" *ngFor="let page of pages">
          <button style="width:100%" (click)="onClick(page.link)">custom-navigation-menu.md</button>
        </li>
    </ul>`
    })
    export class CustomNavigationMenuComponent {
      @Input() pages = []
       
      onClick(link) {
          location.href = link;
      }
    }
       
    @NgModule({
    declarations: [CustomNavigationMenuComponent, AppComponent, ...PageDeclarations],
    imports: [...AppImports],
    providers: [...AppProviders],
    bootstrap: [AppComponent]
    })
    export class AppModule { }
    
  3. Run the application

Get Radzen

Sign-up to download the free 30-day Radzen trial.